input输入框和 pure框架中的 box-sizing 值问题
在使用pureCSS框架的时候,遇到一个问题。 input输入框,我给他们设置了宽度和padding值,我发现,在火狐和谷歌上面发现,增加padding值并不会影响最终的宽度,而在IE6 7下则会影响宽度。后来发现是pure框架为输入框设置了box-sizing导致(IE6 7不支持),我得分别设置不同的宽度。 所以,在使用这个框架的时候, 为了统一,应该设置 input[type=text] { box-sizing : content-box; -moz-box-sizing : content-box; }
以下是查找的资料: 来源: http://segmentfault.com/q/1010000000413229
input文本框输入内容需要缩进,使用text-indent和padding-left有哪些区别,用哪个好?
总的来说,text-indent
不影响元素的最终宽度但是有兼容性问题,padding-left
在中国主流浏览器IE低版本下影响最终宽度,但在chrome和firefox下不影响宽度,但是可以通过CSS reset解决多浏览器显示不一的问题,使得他们最终都影响宽度。
text-indent
和padding-left
的基本区别:
padding-left
基于盒模型,适用于inline和block层级的元素text-indent
基于行内排版,仅仅适用于block层级的元素,作用于block层级的元素的内部第一行文字
几乎他们所有的表现区分都是这二者的区分。
padding-left
会作用于inline框
或block框
的左侧padding区域,会影响到content-box,而文字子节点会出现在content-box内部,因此所有文字都会左移。
text-indent
会作用于block框
的第一行文字。无论是文字超过容器的宽度被white-space
的相应规则截断,还是文字中的回车被white-space
的相应规则保留,最终导致第二行第三行第N行出现,后面的第二行第三行第N行都不会应用到相应的indent。text-indent
的目的很纯净,就是为了模拟现实排版需求中的首行缩进效果。
http://jsfiddle.net/humphry/3bSSX/
<input type="text">
作为一个inline-block层级的标签,它是固定单行显示的(而且还和white-space
机制不一样),上面所述区别并不存在。
那么区别在哪里呢:
-
text-indent
基于行内排版,导致应用了direction: rtl
之后,text-indent
提供的indent出现在右侧;padding-left
则不受direction
影响。
当然,direction
这个属性不常用于<input type="text">
-
padding-left
基于盒模型,所以box-sizing
属性会和padding-left
、width
属性一同影响到元素的最终宽度;而text-indent
则始终不会影响元素的宽度。
这很重要,因为webkit和firefox的默认样式表里,会设置input元素的box-sizing: border-box
,若你同时设置了width
和padding-left
,会出现webkit/firefox和IE低版本的很大的宽度区别。
因此,用到padding-left
时,需要重置webkit和firefox的相应样式:
input[type=text] { box-sizing : content-box; -moz-box-sizing : content-box; }
重置样式之后,在所有浏览器里面,有效的padding-left在所有情况均会加到元素的最终宽度上,如上面jsfiddle所示。这是需要额外考虑的事情。