我是流体布局控,经常会遇到文本框以及文本域宽度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浏览器下存在已经有3年之久了,到现在还没有修复。
如何修复这个问题呢?
//zxx: 可能有人会提议div模拟文本框(即div设置padding值), 文本框本身no border, no padding, 且width:100. 这种操蛋的方法我是一点都不喜欢的(纯属个人喜好,没有攻击的意思),一是啰嗦;二来文本框本身可能就有box-shadow, outline以及内联的交互验证UI(如验证非法红色外发光),难道你想把这些都抹杀掉??
更新2012-11-30
注意:FireFox 17+已经修复了该问题!
二、text-indent修复法firefox浏览器下的问题其实只是文字的位置问题而已,其本身的宽度渲染都是准确的,因此,我们可以把解决问题的关键点放在解决文字不缩进的问题上——我们自然而然就会想到文字缩进属性text-indent
.
于是,在FireFox浏览器下,我们只要设置:
复制代码代码如下:
input { text-indent: 4%; }
就可以了!
现在的问题是,如何只让FireFox浏览器设置这个属性呢?FireFox浏览器有专属的hack吗?
于是,对于刚才的文本框,我们会看到FireFox浏览器默认对其的设置,其中有个这个:
这正是我们需要的,因此,添加类似下面的补丁:
复制代码代码如下:
input:-moz-read-write{text-indent:4%;}
即可完美修复FireFox浏览器下光标以及文字顶头显示的bug.
可能的疑问
说到这里,可能有比较灵光的同行会疑问,既然text-indent
可以让文字位置后移,那为何要使用padding
呢,直接:
复制代码代码如下:
input { width: 100%; text-indent: 4%; }
不就可以了吗?
这确实是个不错的idea, 只可惜在IE6/IE7浏览器下,text-indent
会偏移文本框的位置(连文本框自身一起缩进了!)。如下截图示意:
如下测试代码:
复制代码代码如下:
.box{padding:40px 0; background-color:#B70D0D;}
.box input { width: 200px; text-indent: 20px; }<p class="box"><input value="我是文字" /></p>
IE8+以及其他浏览器下都是OK的,缩进的只是文本框的文字,文本框不动,如下示意:
局限text-indent
撑开文字边距是有局限性的,显而易见,其只能让第一行文字有边距。于是,当面对多行文本域(textarea
)的时候,text-indent
就捉襟见肘,无能为力了!
因此,对于文本域,我们需要寻求其他完善方法。
三、box-sizing的修复策略FireFox下文本框或文本域对百分比padding值的显示有问题,但是对具体px的padding值显示却正常。因此,我们可以设置padding-left
/padding-right
为类似10px
这样的具体数值,而把问题解决的重心放在如何宽度100%显示上。
在CSS3属性中,有个叫做box-sizing的好东西,IE8+以及现代浏览器都支持,如果我们设置该属性值为border-box
,则padding值不会撑大元素的设定宽度,如width:100px; padding:10px;
最后元素占据的宽度还是100像素而不是120像素。
于是,这里,我们可以如下设置CSS:
复制代码代码如下:
input:-moz-read-write{width:100%; height:40px; padding:10px; -moz-box-sizing:border-box;}
FireFox即问题修复,如下截图:
上面的box-sizing方法影响到了原本OK的height
设置,而使用CSS3 cacl()计算只针对目标属性width
进行处理,如下修复代码:
复制代码代码如下:
input:-moz-read-write{width:-moz-calc(100% - 20px); padding:10px;}
注意,减号(-
)前后需要有空格,否则无法识别。
到目前为止所示的情况都是不含边框的,基本上,全世界90%+的文本框或者是文本域都是有border
的,或自身的或CSSer设置的,要知道,border
是不支持百分比宽度的,只能是固定数值大小的单位。现在问题来了:含有border
的文本域文本框如何实现宽度100%的自适应呢??
使用padding正值+margin负值补间技术
。
//zxx: 这里的内容有些偏题,不过多展开。
上面一个例子是仅边框是固定像素值;下面一个是边框以及左右padding
都是固定数值。都实现了良好的100%自适应,兼容IE6以及IE7浏览器。
然而,在实际的项目中,我并不经常使用上面的方法。一是牵扯父标签;二是牵扯计算;三是无法大范围重用(原因是父标签的padding值设置受限)。
OK,到此为止,感谢阅读,欢迎指正文章表述不准确的地方,吃饭饭去咯~
文本框,百分比,padding
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]