转:【总结】浏览器CSS Hacks汇总,浏览器兼容方式CSS Hacks

【总结】浏览器CSS Hacks汇总

  浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等)。

  CSS hacks利用浏览器的漏洞来隐藏特定浏览器的CSS规则。实现浏览器兼容主要有两种方式条件样式表和CSS Hacks(Selector Hacks、Attribute Hacks)。对此根据一些资料汇总了一些CSS Hacks方法。

 

1.条件样式表

像这样的代码你应该见过:

<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css"href="css/ie.css" />
< ![endif]-->

PS:yahoo的内部编码最佳做法并不建议使用有条件的样式表。它会增加额外的平均1或2个HTTP下载请求(参考这里)。

2.选择器Hacks(Selector Hacks)

/* IE6 及以下 */
* html #uno { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (IE 6,7以外) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 及以下, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }

/* IE6-8以外 */
:root *> #quince { color: red }

/* IE7 */
*+html #dieciocho { color: red }

/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }

/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }

PS:选择器Hacks方式比较多, 但只要代码写得够标准, 其实要 Hack 的地方不会很多的, 除了有时候IE捣乱,IE 以外的浏览器几乎都不会有问题。

3.属性hacks(Attribute Hacks)

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* 或 #color: blue */ }

/* IE6以外 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* 仅IE8 */
#veinte { color: blue\0; }

PS:属性Hacks混写是我较多使用的一种方式,感觉写起来比较简单。CSS Hacks的使用大多情况下是为了兼顾一下爱捣乱的IE,使用Attribute Hacks基本上能解决对IE的兼容。

4.属性hacks混写

/* !important优先 */
#bgcolor {
background:red !important; /* Firefox 等其他浏览器 */
background:blue; /* IE6 */
}

#test {
background-color: black; /* Firefox, Opera, IE8 */
[;background-color: green;] /* Safari, Chrome */
*background-color: blue; /* IE7 */
_background-color: red; /* IE6 */
}

PS:属性hacks混写要注意书写次序。

  最后,看一下这个测试页面吧(演示

  其实浏览器兼容不应该只对过去的浏览器兼容(向前兼容),更应该考虑为未来浏览器服务(向后兼容),所以开发时,要尽可能的符合标准,保持代码整洁是一件很重要的事情(参考《Keep CSS Simple》)不得已的时候才Hack一下。

  本文地址:http://www.cnblogs.com/wiky/archive/2010/01/07/Browser-CSS-Hacks-assembles.html

PS:本文由维奇总结,如有转载请注明出处,谢谢!

参考资料

Browser CSS hacks:http://paulirish.com/2009/browser-specific-css-hacks/

CSS Hacks:http://www.webdevout.net/css-hacks

延伸阅读

Will the browser apply the rule(s)?

CSS Hackz Series: Targeting and Filtering Internet Explorer 7

CSS Hack 汇总快查

CSS hack:区分IE6,IE7,firefox

时间: 2024-12-17 14:48:10

转:【总结】浏览器CSS Hacks汇总,浏览器兼容方式CSS Hacks的相关文章

ie6,ie7,ie8 css bug汇总以及兼容解决方法

1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是由于其低级元素ul的padding引 起,padding的上下值对li有影响,左右无影 响.所以只好笨手笨脚地把padding去掉,换成margin.这是能解决问题,但往往不是我们想要的结果,或许 还会引起其他不必要的怪现象. 解决这个问题的方法,其实很简单,既然是有ul引 起的,就设置ul的显示形

【CSS】一种兼容纯粹CSS的IE6的面板

面板这东西,随着前端框架的逐渐流行,已经大量地占据网页封面了. 其实这东西可以用纯粹CSS的方式写出来了. 比如如下面板: 其代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org

CSS的4种引入方式及优先级

第一:CSS的4种引入方式 CSS的4种引入方式是:行内样式.内嵌样式.链接样式.导入样式 1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如: <p style="color:#F00; "></p> 缺点:HTML页面不纯净,文件体积大,不利于蜘蛛爬行,后期维护不方便. 2.内嵌样式 内嵌样式就是将CSS代码写在<head></head>之间,并且用<style></s

浅谈CSS hack(浏览器兼容)

今天简单写一点关于浏览器兼容的处理方法,虽然百度上已经有很多,但是我还是要写! 先看一个图 这个图描述了2016年1月至8月网民们所使用的浏览器市场份额(来源:http://tongji.baidu.com/data/browser).令我感到欣慰的是chrome排第一,chrome一直以来对W3C标准都支持得比较友好,但是图中也反映了使用IE系列的人数也不少,所以我们日常做前端开发的时候还要考虑他们的感受. 以下是正文: 我的前任公司做前端的时候,要求兼容IE8及以上,谷歌,火狐三座大山.因为

兼容IE6浏览器的最大高度和最小高度css代码

兼容IE6浏览器的最大高度和最小高度css代码:IE6浏览器是不支持最大高度和最小高度属性的,下面就通过兼容性措施实现此功能.一.最大高度效果: .max_height{ max-height:400px; _height:expression(this.scrollHeight > 400 ? "400px" : "auto"); } 二.最小高度效果: .min_height{ min-height:200px; _height:expression(th

在不同的浏览器使用不同的css样式,解决浏览器兼容问题

区别IE6与FF:       background:orange;       *background:blue; 区别IE6与IE7:       background:green !important;       background:blue; 区别IE7与FF:       background:orange;        *background:green;       方法一:在同一个CSS样式表中,使用 !important 来定义不同的值以适应Firefox和IE,例如:

CSS Hack (各个浏览器兼容的问题)

写css样式的时候,恐怕最头疼的就是各个浏览器下的兼容性问题,即css hack,明明感觉应该是对的,但是就是出不来效果,我根据平时所接触的,总结一下关于兼容 性的技巧,希望可以对大家有所帮助…… CSS Hack的原理是什么 由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系.我们就可以根据这个来针对不同的浏览器来写不同的CSS. CSS Hack大致有3种表现形式,CSS类内部Hack.选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针

web开发之浏览器(五)----浏览器兼容CSS hack

首先,仅仅IE支持的条件注释语句 <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![endif]--><!--[if IE 6]> 仅IE6可识别 <![endif]--><!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]--><!--[if gte IE 6]&g

css在各浏览器中的兼容问题

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容