CSS Hack 技巧详解-优快云博客

本文章是依《史上最全的CSS hack方式一览》所作的学习笔记。

1 CSS hack

由于不同厂商浏览器或者不同版本的浏览器，对CSS或JavaScript的支持以及解释都不尽相同，导致不同的浏览器显示相同的页面会有不同的显示效果。为了统一显示效果，就需要针对不同的浏览器、不同的版本，编写特定的CSS样式，这个过程叫做CSS hack。

2 CSS hack 的分类

CSS hack的表现形式大致分为三种：条件注释法、类内属性前缀/后缀法，以及选择器前缀法。

2.1 条件注释法

这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式。

用法很简单，类似于html的注释，将内嵌想要 IE浏览器使用的元素标签编写进对应的HTML文档位置即可，如（注意方括号里的大小写以及空格号）：

<!--[if IE]>
<p>这段文字只在IE浏览器显示</p>
<![endif]-->

<!--[if gt IE 6]>
<p>如同jQuery选择器中的gt,这段文字只在版本号大于IE6的浏览器显示</p>
<![endif]-->

<!--[if lt IE 6]>
<p>如同jQuery选择器中的lt,这段文字只在版本号小于IE6的浏览器显示</p>
<![endif]-->

<!--[if lte IE 6]>
<p>这段文字只在版本号小于或等于IE6的浏览器显示，e表示的是equal</p>
<![endif]-->

<!--[if ! IE 6]>
<p>这段文字不在IE6浏览器显示</p>
<![endif]-->

2.2 类内属性前缀/后缀法

属性前缀法是在CSS样式属性名加上一些只有特定浏览器才能识别的hack，以达到预期的页面展现效果。

2.2.1 针对不同的浏览器

关于chrome，Safari，Firefox，Opera，IE浏览器：

-moz-：表示Firefox
-ms-：表示IE
-webkit-：表示chrome和Safari
-o-：表示Opera

典型的例如user-select属性，要想要设置不能选择，在chrome以及Safari浏览器要使用-webkit-user-select:none;，在Firefox浏览器要使用-moz-user-select:none;在版本号大于IE9的IE浏览器中使用-ms-user-select:none;，而版本低的IE浏览器就要onselectstar标签属性来达到相同的效果了。

2.2.2 针对不同版本的IE浏览器

如图：
IE浏览器各版本 CSS hack 对照表

简单来讲就是：

-：减号是IE6专有的hack
\9 ：IE6/IE7/IE8/IE9/IE10都生效
\0 ：IE8/IE9/IE10都生效，是IE8/9/10的hack
\9\0：只对IE9/IE10生效，是IE9/10的hack

注意：是 右斜杠号 \

2.3 选择器前缀法

使用选择器前缀法，就是选用一些特定版本浏览器支持或不支持的选择器来达到效果，如:nth-child(4n)，not()等，这样的选择器IE8浏览器时不支持的

2 JavaScript关于IE8兼容的问题

2.1 关于`event.preventDefault()`

很多时候，为了取消浏览器的默认行为，都会使用上jQuery的event.preventDefault()方法，然而尽管是使用jQuery2.0以下的版本，IE8浏览器对event.preventDefault()方法依旧是不支持的，为了兼容IE8，可以创建以下函数方法：

function stopDefault(event){
    if (event && event.preventDefault) {
        return event.preventDefault();
    } esle{
        return window.event.returnValue = false;
    }
}

2.2 关于使用`split()`与正则表达式结合使用

结合正则表达式使用split()方法对字串符进行切割操作是很方便的事，然而IE8在二者结合使用时，会有bug，导致对应切割出来的字符为空集。
这时如果想要兼容IE8，还想快捷地对字串符进行切割操作，可以结合正则表达式使用replace()方法把想要用于分割节点的字符全更换成特定的字符，然后在使用split()对字串符进行操作。

转载于:https://www.cnblogs.com/AB786883603/p/8325398.html