YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » CSS » CSS学习经验总结 – CSS Hack

CSS学习经验总结 – CSS Hack

关于浏览器兼容问题

在上一章节里最后面提过 hack 的一些写法,其实 CSS Hack 的主要目的就是为了解决浏览器兼容问题。而浏览器兼容问题也是初学者必须掌握的一个重要知识点。而作为一名合格的前端工程师,确保页面在主流浏览器中的显示一致,处理兼容浏览器问题是一门必修的基础课程。

而关于浏览器兼容问题首先需要强调的一点就是,浏览器的兼容问题不仅仅是一个单纯的技术问题,也是一个历史遗留问题。由于早期的浏览器大战,各个浏览器厂家各自为政,各自有各自的一套技术规范,各个技术团队的水平不同,还有各自对 Web 标准的理解问题,最终造成了浏览器各种兼容问题的存在。

其次,浏览器兼容问题,不仅现在有,将来很长一段时间也会一直(甚至可以肯定永远)存在。因为以第一原因会一直存在,只是现在各大浏览器厂商对 Web 标准大家都支持得更好,修复了以前的一些 BUG,问题相对少了。但是同时随着 web 技术的不断发展,又有新的 web 标准、有新版本的浏览器软件、软件又有版本更新。这样就会有新 BUG 产生,这个规律是不会变的。

所以,所有做前端开发的朋友都会一直需要处理各种浏览器兼容问题。而浏览器的 CSS bug 在IE系列的浏览器中更为严重。我这里还是用 hasLayout.net 网站统计的 《Internet Explorer CSS Bugs》看看我们都会遇到哪些 IE 的 CSS 显示 Bug 吧:

Internet Explorer CSS Bugs

普通 Bug

这部分 IE 的 bug 是比较普通的无法归到其它种类,或是同时属于多个种类的 Bug。

名称 IE的版本 描述
Hover White Background Ignore Bug IE7 background 不会因为 :hover而改变
IE7 Child Selector Comment Bug IE7 一个 selector 包含了一个子的selector,如果后面跟着一个注释,则会被完全忽略。
Star HTML Bug IE6 * html selector 在 IE6 中没有被忽略
IE6 !important Ignore Bug IE6 !important 关键字会忽略,如果有相同的属性被设置了
PNG Image and Background Color Mismatch IE8 及以下版本 背景颜色和指定的图片的颜色不一致。而他们本来是一致的。IE认为这是他一个Feature。太可笑了。
No Auto Margin Center Pseudo-Bug IE8 及以下版本 如果把margins 设置成 `auto` ,IE不会把组件放置在中间的位置。所有的浏览器都会,只有IE不会。
:first-line !important Rule Ignore Bug IE8 如果在伪class :first-line 内使用!important,那么其所有定义会被忽略。
:first-letter Ignore Bug IE6 整个:first-letter 的属性定义会被除数完全忽略。
:first-letter !important Rule Ignore Bug IE8 如果在伪class :first-letter内使用!important,那么其所有定义会被忽略。
Partial Click Bug v2 IE8以 设置了整个区域是可以点击的,但在IE中只有文本可以点击。
Staircase Bug below IE8 浮动的元素排序起来就像一个楼梯。
Disappearing List Background Bug IE6 B <li>, <dt>, <dd> 没有背景。
noscript Ghost Bug IE8 and below <noscript> 标识中只有 borders/background 才有用。
No Transparency Click Bug IE8 and below 背景透明的图片在作为链接时,并且其“filter”被设置成了PNG透明,但其背景还是不可点击。
List Drop Shift Bug IE8 在<li>中的内容被换行了。
No Increase on <ol> Numbers Bug below IE8 <ol> 中的 <li> 列表序号不会增加。
No Bullets on <ul> and <ol> Bug below IE8 在<ul> 和 <ol> 中看不到列表序号/数字了。
No line-height Vertical Center on Images Bug IE8以下版 图片使用line-height 方法不能垂直居中
No Background Image Bug IE8及以下版 在IE中使用background无法定义背景图
Custom Cursor Bug IE8及以下版 自定义鼠标不工作
Leaking Background Bug IE6 背景从一个元件的内部溢出到外部
Expanding Height Bug IE6 元件的高度比指定的要长得多。
Expanding Width Bug IE6 元件的宽度比指定的要长得多。
Double Margin Bug IE6 float元件的左和右的空白(margins)被加倍了。
Negative Margin Bug IE8以下版 如果使用负数来指定页白(margins)里面的元件会被外面的元件所遮挡。
Italics Float Bug IE6 float的元件中的字体会被设置成倾斜。
3px Gap Bug aka Text Jog Bug IE6 下一个float的元件不是有一个3px的空隙,就是被换行了。
Text-Align Bug IE8以下版 text-align属性会影响整个元件内的所有内容。

布局类 Bug

名称 IE的版本 描述
Border Chaos Bug IE6 连框显示是混乱的
Sub-Hover Bug IE6 一些selectors 如 a:hover foo{} 无法正常工作
Partial Click Bug IE6 在定义了display: block的链接中(<a>) 只有文本是可以点的。
Disappearing Content Bug IE6 当我们滚动窗口的时候,或是最大化最小化窗品的时候,有一些内容会重复显示。

不支持的功能

名称 IE的版本 描述
No Child Selector Support Workaround IE6 子 selector 无效
Max-Height Workaround IE6 max-height 无效
Max-Width Workaround IE6 max-width 无效
Opacity IE8及以下版 opacity 属性无效
Min-Width Workaround IE6 min-width 属性无效
Min-Height Workaround IE6 min-height 属性无效

程序崩溃 Bug

这个BUG可以导致整个 IE 崩溃。

名称 IE的版本 描述
Hover Crash Bug IE6 当你把鼠标移上 :hover 的链接时,浏览器会崩溃

一个 IE 浏览器的 CSS Bug 就好多了啊?!是不是跟我有一样的感受?做前端开发处理这些兼容问题(此外 JavaScript 的兼容问题也是很让工程师们头大的)还真辛苦!

好了,不感概了。问题这里已经就给大家列出来了,具体的内容大家可以看 haslayout.net 上的博文,它的介绍已经很全面了。接下来的就是需要我们多练习,在这种主流浏览器(IE6~9,Firefox1.5+,Chrome,Safari3+,Opera9.5+)上都要亲自动手测试一下自己写的代码的兼容性,发现有问题,就要根据资料提供的解决办法来处理。

就像我前面说的,作为一名 Web 前端工程师,处理兼容问题是一项基础必修课程。不要因为写的代码在主流的浏览器上能显示一致,有不错的兼容性就沾沾自喜,因为这些是你应该了解的,而且是比较基础的。因为前端工程师不止要写的页面兼容性好,更需要对页面的前端性能做充分优化,同时还要有好的用户体验,让用户用起来感觉顺手好用,使用方便简单。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:CSS学习经验总结 – CSS Hack

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)