[分享]css兼容有哪些兼容性

CSS 可以为网站带来漂亮的外观和布局，但是不同的浏览器可能会对同一段 CSS 代码的解释和呈现不同。这种情况称为 CSS 兼容性问题。 {margin: 0px; padding: 0px;} / ...

CSS 可以为网站带来漂亮的外观和布局，但是不同的浏览器可能会对同一段 CSS 代码的解释和呈现不同。这种情况称为 CSS 兼容性问题。

* {margin: 0px; padding: 0px;} /* 将元素的默认内外边距清零，减小各个浏览器的差异 */

/* 对于浏览器显示的兼容性问题需要做些调整，可以使用条件注释的方式进行hack */
<!--[if IE]>
    body {
        font-family: Verdana, Arial, sans-serif; /* 对于 IE5-IE8 版本支持较差的 font-family 可以使用widows系统的默认字体 */
        background-image: url(ie-background.png); /* 针对 IE 特有的属性，只在IE中显示背景图 */
    }
    #content {
        display: inline-block; /* IE 下块级元素需要设置 inline-block 才能相邻显示 */
        zoom: 1; /* 在早期的IE版本中需要通过 zoom: 1 触发 hasLayout 属性，解决许多layout引起的兼容性问题 */
    }
    #logo {
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=logo.png, sizingMethod='scale') /* 解决IE6-IE8版本支持度较差的透明 PNG/背景图问题 */
    }
<![endif]--> 

以上是常用的 CSS 兼容性 hack 方式，但由于网站代码之间相互影响，所以使用这些 hack 也很可能会带来无法预料的副作用。因此，在设计代码时应该考虑最小化兼容性问题，同时也要注意 cross-browsing 方案的正确性和可维护性。