各浏览器中width和height作用位置的差异

通常我们在给一个块级元素设置宽高的时候，该尺寸都是作用在content-box上的。

问题：当浏览器工作在混杂模式下，作用的尺寸会不同，这将引起布局发生混乱。

1.表格元素 TABLE 上的差异

表格的内容区域是由其 border box 决定的，因此在 TABLE 上设置的 'width' 和 'height' 将作用在其 border box 上。

2.在非替换元素上的差异

也就是说，在 IE6(Q) IE7(Q) IE8(Q) 下，设置的 'width' 和 'height' 将包含该元素的内容尺寸 + 'padding' 尺寸 + 'border-width' 尺寸。

3.在 INPUT[type=text]/TEXTAREA 元素上的差异

当给一个 INPUT[type=text]/TEXTAREA 元素设置 'width'、'height' 时，它们在所有浏览器的混杂模式 (Q) 中都被作用到了 border box，而在所有浏览器的标准模式 (S) 中则作用到了 content box。

解决方法：

1.使用能触发标准模式 (S) 的 DTD

2. 使用 CSS 3 的新特性：box-sizing （即指定作用位置）

'box-sizing' 有两个可选值：

content-box和 CSS 2.1 中的定义保持一致，在一个元素上定义的 'width' 和 'height'（以及他们的 min/max 特性）将决定该元素的 content box 的尺寸。
该元素的 'padding' 和 'border' 在定义的 'width' 和 'height' 之外呈现。

border-box在一个元素上定义的 'width' 和 'height'（以及他们的 min/max 特性）将决定该元素的 border box 的尺寸。
该元素的 'padding' 和 'border' 在定义的 'width' 和 'height' 之内呈现。

* {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}

　　

 

转载于:https://www.cnblogs.com/justyq/p/5005128.html