谷歌浏览器如何向ie8那样设置兼容性

最近发现当li浮动的时候，ul标签在ie浏览器下不能随着li的高度增高。为了兼容ie,firefox,ie8的高度显示一致，网上搜了个好方法。如下给大家详细解释。个人比较喜欢这个解决方法。

在各个浏览器中的效果一致：

可以看到，外面 ul 即蓝色的区域高度为0，如果没有设置 padding，这个 ul 是看不到的。当然要让它伸长也很简单，只需要在最后一个 li 后面加一个标签清楚下浮动就可以了。不过这样的话就改变了html结构，不好。现在这里要讨论的就是如何在不改变结构的情况下让 ul 自动伸长。

注意：自动伸长针对的是包含浮动元素的元素(这里是 ul)。而不是浮动元素自身(li)。

ie 支持一个 css 属性 zoom， 这个元素接受一个数字或一个百分数，表示这个元素放大（缩小）的比例。例如：zoom:0.5或zoom:50% 表示缩小一半，而zoom:2或zoom:200%则表示放大一倍。 
当定义了这个属性之后在 ie 浏览器里面就会自动适应高度了。当应用了这个属性之后，ie 就会自动伸长了。一般情况下我们不需要放大或缩小，所以定义 zoom:1 就行了。现在的 css代码如下:

而非 ie 浏览器不支持这个属性。所以第一种方法需把浏览器分为两个阵营：ie 和 非ie。 
对于非 ie 浏览器需要用到一个伪类 :after (ie 浏览器不支持)。css 代码如下：

可以看到 ul 已经自动伸长了，但下面有个小小的黑点。相信你已经猜到了，这个黑点对应的就是 content:”.” 。 
好了，现在在两个阵营的浏览器里都实现目标了。以下是 ul 所有的css代码如下:

上图为2014年7月全球浏览器市场份额（来自(#换成@)