浏览器的兼容性问题一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。解决IE8及更早版本不兼容问题可以在HTML页面声明 !DOCTYPE html即可。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>把图片布局在盒元素底部</title>
<style type="text/css">
#box {
width:500px;
height:200px;
border:1px solid #F90;
display:-webkit-box;
display:-moz-box;
display:box;
}
#box div {
padding:5px;
border:1px solid #ccc;
margin:1px;
}
#box div img {
width:120px;
}
</style>
<body>
<div id="box">
<div><img src="images/IL1.jpg" /></div>
<div><img src="images/IL2.jpg" /></div>
<div><img src="images/IL3.jpg" /></div>
<div><img src="images/IL4.jpg" /></div>
</div>
</body>
</html>
Processed:
0.013, SQL:
9
