IE兼容-绝对定位

ie6,ie7在进行绝对定位时,必须同时设置left(right)和top(bottom)值。
代码如下:

<style>
*{
  margin:0;
  padding:0;
}
div{
  width:166px;
  height:122px;
  border:1px solid #000;
  position:relative;
}
p{
  position:absolute;
  bottom:0px;
  left:0px;  /*ie6.7*/
  width:166px;
  height:30px;
  background-color:#666;
  color:#fff;
}
img{
  background-color:#ccc;
  width:166px;
  height:122px;
}
</style>
</head>

<body>
<div>
  <img src="product.jpg" />
  <p>1111111111</p>
</div>
</body>

当未设置p元素的left属性时,p元素未出现在预定位置,如下图左;当设置好left属性shi,p元素显示正常,如下图右。

      图1 IE兼容-绝对定位        图2  IE兼容-绝对定位
 

 

你可能感兴趣的:(浏览器兼容)