杂记(兼容IE浏览器)
来源:互联网 发布:网络金融考试 编辑:程序博客网 时间:2024/05/22 12:38
本文章是依《史上最全的CSS hack方式一览》所作的学习笔记。
1 CSS hack
由于不同厂商浏览器或者不同版本的浏览器,对CSS或JavaScript的支持以及解释都不尽相同,导致不同的浏览器显示相同的页面会有不同的显示效果。为了统一显示效果,就需要针对不同的浏览器、不同的版本,编写特定的CSS样式,这个过程叫做CSS hack。
2 CSS hack 的分类
CSS hack的表现形式大致分为三种:条件注释法、类内属性前缀/后缀法,以及选择器前缀法。
2.1 条件注释法
这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式。
用法很简单,类似于html的注释<!--注释-->
,将<!--[if IE]>
和<![endif]-->
内嵌想要 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浏览器
如图:
简单来讲就是:
-
:减号是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()
对字串符进行操作。
- 杂记(兼容IE浏览器)
- IE 浏览器下的兼容(onclick)
- IE 浏览器兼容 代码
- IE浏览器兼容
- ie浏览器兼容插件
- ie浏览器兼容
- ie浏览器兼容笔记
- ie浏览器兼容笔记
- IE 浏览器兼容
- 兼容ie浏览器
- PC端,浏览器兼容、IE兼容(圆角、阴影、透明)
- 让IE浏览器兼容HTML5
- innerText 兼容火狐 ie浏览器
- IE浏览器的兼容模式
- 针对IE的浏览器兼容
- IE浏览器兼容模式设置
- IE、360浏览器兼容解决
- IE浏览器兼容iframe跳转
- 多行文字超出部分显示省略号
- __attribute__((format(printf, a, b)))
- CSU-ACM2017暑期训练12-KMP D
- Java中的匿名内部类及其使用技巧
- node.js解决跨域问题
- 杂记(兼容IE浏览器)
- Java String类 源码注释阅读
- 8-8 DAIRY
- linux file system
- Spark中的事件循环处理器EventLoop
- HTML+CSS+DIV实战演练笔记
- HDU6090-思维&构造&贪心&&2017多校5-Rikka with Graph
- Stream
- 20170808