FireFox下文字框/域百分比自融入标值padding显示信

2020-10-24 00:58 jianzhan
1、难题叙述

我是流体合理布局控,常常会遇到文字框和文字域宽度100%自融入显示信息的状况。

以下实际效果图:

在窄屏下,上面的文字框宽度也要跟随外界宽度缩小。

难点
针对文字框或文字域,光标最好是间距左边边沿有1定的间隔。因而,大家基础上都有相近下面的设定:

拷贝编码
编码以下:

input { padding-left: 10px; }

可是,假如只考虑到文字框自身(父标识无别的独特解决),这1套在流体自然环境下是行堵塞的,由于固定不动的padding数字能量数组没法让文字框始终100%自融入外界的宽度,最少非当代访问器下是这般!//zxx: CSS3测算(calc())便是以便处理这类难题才诞生的!

拷贝编码
编码以下:

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

现阶段而言,好的处理之道是widthpadding均选用百分比值,比如下面这样:

拷贝编码
编码以下:

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

难题
上面这类写法,IE6+, Opera, Chrome, Safari访问器全是显示信息很OK的;唯有FireFox火狐访问器,其尽管宽度3D渲染一切正常,可是,光标的部位确是顶头的(与标值padding的显示信息彻底不一样)。

以下截图:

这个难题再FireFox访问器下存在早已有3年之久了,到如今都还没修补。

怎样修补这个难题呢?

//zxx: 将会有人会建议div仿真模拟文字框(即div设定padding值), 文字框自身no border, no padding, 且width:100. 这类操蛋的方式我是1点都不喜爱的(纯属本人爱好,沒有进攻的意思),1是唠叨;2来文字框自身将会就有box-shadow, outline和内联的互动认证UI(如认证不法鲜红色外发光),难道说你想把这些都扼杀掉??

升级2012⑴1⑶0

留意:FireFox 17+早已修补了该难题!

2、text-indent修补法

firefox访问器下的难题实际上只是文本的部位难题罢了,其自身的宽度3D渲染全是精确的,因而,大家能够把处理难题的重要点放在处理文本不缩进的难题上——大家当然而然就会想起文本缩进特性text-indent.

因而,在FireFox访问器下,大家要是设定:

拷贝编码
编码以下:

input { text-indent: 4%; }

便可以了!

如今的难题是,怎样只让FireFox访问器设定这个特性呢?FireFox访问器有专属的hack吗?

大家开启FireBug, 点一下下图所示的地区:

因而,针对刚刚的文字框,大家会看到FireFox访问器默认设置对其的设定,在其中有个这个:

这更是大家必须的,因而,加上相近下面的补钉:

拷贝编码
编码以下:

input:-moz-read-write{text-indent:4%;}

便可完善修补FireFox访问器下光标和文本顶头显示信息的bug.

修补以后的实际效果以下截图:

1024宽度下的截图:

将会的疑惑
说到这里,将会有较为灵光的同行业会疑惑,既然text-indent可让文本部位后移,那为什么要应用padding呢,立即:

拷贝编码
编码以下:

input { width: 100%; text-indent: 4%; }

不便可以了吗?

这的确是个非常好的idea, 只可是在IE6/IE7访问器下,text-indent会偏位文字框的部位(连文字框本身1起缩进了!)。以下截图示意:

以下检测编码:

拷贝编码
编码以下:

.box{padding:40px 0; background-color:#B70D0D;}
.box input { width: 200px; text-indent: 20px; }<p class="box"><input value="我是文本" /></p>

IE8+和别的访问器下全是OK的,缩进的只是文字框的文本,文字框没动,以下示意:

局限
text-indent撑开文本边距是有局限性的,不言而喻,其只能让第1写作字有边距。因而,当众对多写作本域(textarea)的情况下,text-indent就困窘,束手无策了!

因而,针对文字域,大家必须寻找别的健全方式。

3、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即难题修补,以下截图:

4、CSS3 cacl()测算修补

上面的box-sizing方式危害到了本来OK的height设定,而应用CSS3 cacl()测算只对于总体目标特性width开展解决,以下修补编码:

拷贝编码
编码以下:

input:-moz-read-write{width:-moz-calc(100% - 20px); padding:10px;}

留意,减号(-)前后左右必须有时间格,不然没法鉴别。

因而,有大概以下的修补实际效果图(FireFox访问器截图):

5、文字框文字域含边框时的解决

到现阶段为止所示的状况全是不含边框的,基础上,全球90%+的文字框或是文字域全是有border的,或本身的或CSSer设定的,要了解,border是不适用百分比宽度的,只能是固定不动标值尺寸的企业。如今难题来了:含有border的文字域文字框怎样完成宽度100%的自融入呢??

应用padding恰逢+margin负值补间技术性
//zxx: 这里的內容一些偏题,但是多进行。

上面1个事例是仅边框是固定不动像素值;下面1个是边框和上下padding全是固定不动标值。都完成了优良的100%自融入,适配IE6和IE7访问器。

基本原理(见下图圈中,显而易见):

但是,在具体的新项目中,我其实不常常应用上面的方式。1是牵扯父标识;2是牵扯测算;3是没法大范畴重用(缘故是父标识的padding值设定受到限制)。

OK,到此为止,谢谢阅读文章,欢迎纠正文章内容描述禁止确的地区,吃饭饭去咯~