您现在的位置是：网站首页> 编程资料编程资料

FireFox下文本框/域百分比自适应数值padding显示bug解决方案

2021-09-07 725人已围观

简介经常会遇到文本框以及文本域宽度100%自适应显示的情况,对于文本框或者文本域，光标最好距离左侧边缘有一定的间距。IE6+, Opera, Chrome, Safari浏览器都是显示很OK的；唯独FireFox火狐浏览器，其虽然宽度渲染正常，但是，光标的位置确是顶头的(与数值padding的显示完全

一、问题描述

我是流体布局控，经常会遇到文本框以及文本域宽度100%自适应显示的情况。

如下效果图：
文本域宽度100%显示张鑫旭-鑫空间-鑫生活

在窄屏下，上面的文本框宽度也要跟着外部宽度变小。

难点
对于文本框或者文本域，光标最好距离左侧边缘有一定的间距。因此，我们基本上都有类似下面的设置：

复制代码

代码如下:

input { padding-left: 10px; }

但是，如果只考虑文本框本身（父标签无其他特殊处理），这一套在流体环境下是行不通的，因为固定的padding数组无法让文本框永远100%自适应外部的宽度，至少非现代浏览器下是如此！//zxx: CSS3计算(calc())就是为了解决这类问题才诞生的！

复制代码

代码如下:

input { width: calc(100% - 10px); padding-left: 10px; }

目前而言，好的解决之道是width和padding均采用百分比值，例如下面这样：

复制代码

代码如下:

input { width: 92%; padding-left: 4%; padding-right: 4%; }

问题
上面这种写法，IE6+, Opera, Chrome, Safari浏览器都是显示很OK的；唯独FireFox火狐浏览器，其虽然宽度渲染正常，但是，光标的位置确是顶头的（与数值padding的显示完全不同）。

如下截图：
FireFox下面文本框百分比padding显示的问题截图

这个问题再FireFox浏览器下存在已经有3年之久了，到现在还没有修复。

如何修复这个问题呢？

//zxx: 可能有人会提议div模拟文本框（即div设置padding值），文本框本身no border, no padding, 且width:100. 这种操蛋的方法我是一点都不喜欢的（纯属个人喜好，没有攻击的意思），一是

上一篇：

下一篇：应用before/after伪类时如何CSS命名以及针对ie6/ie7浏览器兼容css a标签的visied伪类失效原因介绍a标签的四个css伪类(link、visited、hover、active)样式理解css伪类伪元素域高级选择器的介绍css中伪类:after的用法(三种方式)ie6不支持hover ie6 标签(除a标签)不支持伪类:hover解决方案CSS中a标签样式的“爱恨”原则：定义链接样式的四个伪类有关于a标签的4个伪类的使用方法a标签伪类的作用及书写顺序是什么

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网