对于CSS样式中的div或li,在IE6下的背景平铺及border边框断线问题是很常见的。解决这个问题需要具备以下技巧:
- 利用触发IE6布局的hack技巧
在IE6中,当元素的宽度或高度值为0时,这个元素的边框就会出现断线的问题。因此,可以利用hack技巧,在样式表中添加以下代码:
* html .className {
height: 1%;
}
这个hack技巧会触发IE6的布局模式,从而解决元素边框断线的问题。
- 利用IE6下border和background共存的方法
在IE6中,当元素的border和background同时存在时,border会覆盖background,导致background无法平铺。因此,可以利用hack技巧,在样式表中添加以下代码:
* html .className {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background.png', sizingMethod='scale');
zoom: 1;
}
这个hack技巧会利用AlphaImageLoader滤镜加载背景图片,并通过zoom: 1属性触发IE6布局模式。从而解决背景平铺问题。
另外,以下是两个示例说明:
示例1:解决背景平铺问题
<style type="text/css">
.clearfix {
width: 100px;
height: 50px;
background: url(bg.png) repeat-x;
border: 1px solid #000;
}
* html .clearfix {
height: 1%;
}
</style>
<div class="clearfix">hello world</div>
以上代码中,div元素的背景图采用重复平铺的方式,但在IE6下会出现背景断线的问题。利用hack技巧,在样式表中添加* html .clearfix { height: 1%; }
代码,触发IE6布局模式,从而解决背景断线问题。
示例2:解决border和background共存问题
<style type="text/css">
.box {
width: 100px;
height: 50px;
background: url(bg.png) repeat-x;
border: 1px solid #000;
}
* html .box {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png', sizingMethod='scale');
zoom: 1;
}
</style>
<div class="box">hello world</div>
以上代码中,div元素的边框和背景图共存,但在IE6下会出现背景不平铺的问题。利用hack技巧,在样式表中添加* html .box {background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png', sizingMethod='scale');zoom: 1;}
代码,利用AlphaImageLoader滤镜加载背景图片,从而解决背景不平铺问题。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:css样式div或li在ie6下背景平铺及border边框断线解决技巧 - Python技术站