css样式div或li在ie6下背景平铺及border边框断线解决技巧

对于CSS样式中的div或li，在IE6下的背景平铺及border边框断线问题是很常见的。解决这个问题需要具备以下技巧：

1. 利用触发IE6布局的hack技巧

在IE6中，当元素的宽度或高度值为0时，这个元素的边框就会出现断线的问题。因此，可以利用hack技巧，在样式表中添加以下代码：

* html .className {
    height: 1%;
}

这个hack技巧会触发IE6的布局模式，从而解决元素边框断线的问题。

1. 利用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滤镜加载背景图片，从而解决背景不平铺问题。