巧用隐藏和负边距实现兼容所有浏览器的ul和li并

效果图呈现如下：

（注：这里的UL样式设计主要是为了展示一排和多排LI元素的不同效果）

让我展示一下HTML部分，虽然内容相对简单，但我就不贴出来了。我们主要聚焦于CSS代码的设计。

对于ul元素，我为其设置了如下样式：

```css

ul {

overflow: hidden;

zoom: 1;

background: ddd;

width: 440px;

margin-bottom: 50px;

margin-left: auto;

margin-right: auto;

}

```

而对于li元素，我赋予它以下样式：

```css

li {

float: left;

display: inline;

width: 100px;

height: 100px;

line-height: 100px;

text-align: center;

margin: 0 5px 10px;

background: aaa;

}

```

当你打开上面的DEMO查看效果时，你会发现IE8、Chrome、FF等浏览器下的表现都很好。但在IE6和IE7下，你会发现一排li和多排li的效果有所不同，一个底部有线条，一个没有。

在CSS社区中，我们对此进行了长时间的讨论。网友们提出了多种解决方案，其中一位叫朵斯提的朋友提供了一个堪称完美的方法。他的方法是在ul外面加一个div，并将习惯上的li左右下边距改为上左右边距。多余的边距通过div隐藏，然后ul向上负边距，彻底盖住上面的部分。核心CSS代码如下：

```css

div {

overflow: hidden;

zoom: 1;

}

ul {

overflow: hidden;

zoom: 1;

margin-top: -10px; / 负边距向上移动 /

padding-bottom: 10px; / 增加底部填充 /

background: ddd;

width: 440px;

margin-bottom: 50px;

margin-left: auto;

margin-right: auto;

}

li {

float: left;

display: inline;

width: 100px;

height: 100px;

line-height: 100px;

text-align: center;

margin: 10px 5px 0; / 改变边距方向 /

background: aaa;

}

```

结合隐藏和负边距的技巧，虽然之前也一直在使用，但如此结合使用还是首次尝试。不得不承认，我还需进一步熟练掌握这些技巧。以上就是我对这个问题的解决方案和过程描述。