csshack

最新推荐文章于 2023-09-19 19:39:14 发布

转载最新推荐文章于 2023-09-19 19:39:14 发布 · 680 阅读

CSS 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了 CSS Hack 的概念及应用技巧，通过特定语法让不同浏览器解析不同的样式，实现跨浏览器兼容性。涵盖 IE、Chrome、Firefox 和 Opera 的具体实现方法。

CSS Hack是一种类似作弊的手段，以欺骗浏览器的方式达到兼容的目的，是用浏览器的兼容性差异来解决浏览器的兼容性问题。

IE6789 CSS Hack

selectors{
    properties:values\9;     /* ie6789 */
    properties:values\0/;    /* ie89 */
    =properties:values;      /* ie67 */
    -properties:values;      /* ie6 */
}
:root selectors{
    properties:values\9;     /* ie9 */
}

<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->

Chrome & Safari CSS Hack

@media all and (-webkit-min-device-pixel-ratio:1) {
        selectors{
                properties:values;
        }
}

Firefox CSS Hack

@-moz-document url-prefix() {
        selectors{
                properties:values;
        }
}

Opera CSS Hack

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
        selectors{
                properties:values;
        }
}

IE条件注释

<!-- [if IE]>
        这里只有ie浏览器才可以显示
<![endif]-->

<!-- [if !IE]><!-->
        这里只有非ie浏览器才可以显示
<!--<![endif]-->

<!--[if IE 6]>
        这里只有ie6浏览器才可以显示
<![endif]-->

<!--[if IE 7]>
        这里只有ie7浏览器才可以显示
<![endif]-->

<!--[if IE 8]>
        这里只有ie8浏览器才可以显示
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
        这里只有ie9以上浏览器和非ie浏览器才可以显示
<!--<![endif]-->