HTML5系列代码:把图片布局在盒元素底部

  • 浏览器的兼容性问题
  • 一旦为页面设置了恰当的 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>

你可能感兴趣的:(HTML5,css,html5,html,js)