您的位置：首页 > 其它

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

2015-11-29 18:13 211 查看
通常我们在给一个块级元素设置宽高的时候，该尺寸都是作用在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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<!DOCTYPE html>


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;
}


　　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航