针对浏览器隐藏CSS之独孤九剑

针对浏览器隐藏CSS之独孤九剑


Hide CSS for Browsers


　　我们都知道浏览器之间是有差异的，很多人在使用XHTML+CSS方式制作网页的时候都曾为此无比头痛。要在这些差异的影响下工作需要很多的技巧，“隐藏CSS”就是其中很重要的一种技巧（甚至是最重要的）。这种技巧的主要思想是，用某些方式对某些浏览器隐藏某些重载的CSS规则。

　　这篇文章并不是想教你如何使用这种技巧，它面向的是有一定CSS基础的设计开发者，我假定你曾经使用过某种隐藏CSS规则的方法。这里是想把可用的方法与被隐藏规则的浏览器都列出来，方便大家在平时工作时随时查阅。

　　在这张大表里列出了九种方法，我就称其为“独孤九剑”，希望能帮上你的忙:-D

　　注：此表格原载w3development.de。










































































































































































































































Browser @import url("...") @import url(...) @import "..." media="" @media comment attribute child Tantek
Amaya 5.1 Win x           x x x
IE 3 Win x x x     x x x x
IE 4 Win x x x   x x x x x
IE 5 Win           x x x x
IE 5.5 Win             x x x
IE 6 Win             x x  
IE 4.01 Mac x       x x x x x
IE 4.5 Mac x         x x   x
IE 5 Mac         x x x    
Konqueror 2.1.1         x        
Mozilla 1.0                  
Netscape 4.x x x x x x   x x x
Netscape 6.01                  
Netscape 6.1                  
Netscape 6.2                  
Opera 3.60 Win             x    
Opera 4.02 Win                  
Opera 5.02 Win                  
Opera 5.12 Win                  
Opera Tech Preview 3 Mac                  

　　看完这张表之后我的第一反应是：Mozilla和Opera真乃神人也。只有一条规则会对Opera最老的一个版本起作用，所以后面我们在讲到隐藏规则的时候基本上就不考虑Mozilla和Opera了。下面列出这九种“剑法”的招数，同时在旁边也注上了我个人推荐的使用场合。注意，我推荐的不一定与你的需求相符，使用前请对照上面的表格。

@import url("")
@import url("global.css")

　　对老版本（版号小于5）的浏览器隐藏规则。

@import url()
@import url(global.css)

　　对Windows平台的老版本（版号小于5）浏览器隐藏规则。

@import ""
@import "global.css"

　　对Windows平台的老版本（版号小于5）浏览器隐藏规则。

media=""
<link href="global.css" type="text/css" rel="stylesheet" media="all"/>

　　对Netscape 4.x隐藏规则。

@media
@media all {

... /* 需要隐藏的规则 */

}

　　如果只考虑NN和IE的话就是只对4.x版本隐藏规则。

comment
#anySelector/* */ { color:#f00; }

　　这可是精确制导导弹。只对IE5及以下版本隐藏规则。所以如果要把IE5和IE5.5分开定义规则，那就靠它了。

attribute
p[id] { color: #0f0; }

　　又一个精确制导导弹。如果不关心老版本浏览器，那就是只对IE隐藏规则。关于属性选择器的更多信息请看W3C的文档。

child
p>span { color: #00f; }

　　基本同上，只是Mac平台部分版本的IE支持这个规则。

Tantek
p#tantek {

voice-family: "\"}\""; /* 某些浏览器有解析bug */

voice-family: inherit; /* 在这以下的规则都会被忽略 */

color: #f00;

}

　　著名的隐藏CSS技巧，对所有“非现代”浏览器隐藏规则。

赞 (0)

相关推荐

  • 针对浏览器隐藏CSS之独孤九剑

    针对浏览器隐藏CSS之独孤九剑 Hide CSS for Browsers 我们都知道浏览器之间是有差异的,很多人在使用XHTML+CSS方式制作网页的时候都曾为此无比头痛.要在这些差异的影响下工作需要很多的技巧,"隐藏CSS"就是其中很重要的一种技巧(甚至是最重要的).这种技巧的主要思想是,用某些方式对某些浏览器隐藏某些重载的CSS规则. 这篇文章并不是想教你如何使用这种技巧,它面向的是有一定CSS基础的设计开发者,我假定你曾经使用过某种隐藏CSS规则的方法.这里是想把可用的方法与被

  • 针对浏览器隐藏CSS

    针对浏览器隐藏CSS

    我们都知道浏览器之间是有差异的,很多人在使用XHTML+CSS方式制作网页的时候都曾为此无比头痛.要在这些差异的影响下工作需要很多的技巧,"隐藏CSS"就是其中很重要的一种技巧(甚至是最重要的).这种技巧的主要思想是,用某些方式对某些浏览器隐藏某些重载的CSS规则. 这篇文章并不是想教你如何使用这种技巧,它面向的是有一定CSS基础的设计开发者,我假定你曾经使用过某种隐藏CSS规则的方法.这里是想把可用的方法与被隐藏规则的浏览器都列出来,方便大家在平时工作时随时查阅. 在这张大表里列出了

  • 一个针对IE7的CSS Hack

    IE7 修复了很多 bug,也增加了对一些选择符的支持,所以现在诸如 *html {} 和 html>body {} 等针对 IE 隐藏或显示的 hack 都会在 IE7 中失效.虽然 CSS Hack 不推荐使用,条件注释才是万无一失的过滤器,但是条件注释只能出现在 HTML 中,CSS Hack 还是有用武之地的.Nanobot 发现了一些针对 IE7 的 CSS Hack,具体就是: >bodyhtml**+html 这三种写法,其中前两种都是不合法的 CSS 写法,在标准兼容浏览器中被

  • JS针对浏览器窗口关闭事件的监听方法集锦

    本文实例总结了JS针对浏览器窗口关闭事件的监听方法.分享给大家供大家参考,具体如下: 方式一:(适用于IE浏览器,而且刷新不提示,只在点击浏览器关闭按钮的时候提示) <script type="text/javascript"> window.onbeforeunload=onclose; function onclose() { if(event.clientX>document.body.clientWidth&&event.clientY<

  • 在到达无H无F境界前~还是要痛苦~我兼容浏览器的CSS

    对着多个解析不一样浏览器是件郁闷的事,是所有写CSS的人都会遇到的. 虽然条件注释是一比较理想的做法,向前向后兼容.可惜我不大喜欢N个版本的CSS, 先说下我的自己的用法. 初始化 Selectors{}  保证向后兼容性, 接着开始过滤 不管IE6有没有引进Quirks Mode 都用  * html Selectors{}  处理IE6和以下版本, 对下再向下版本的区分我做了比较复杂的处理. 用读入IE5.x @media tty { i{content:"\";/*" 

  • 多浏览器支持CSS 容器内容超出(溢出)支持自动换行

    .linebr { clear: both; /* 清除左右浮动 */ width: 100px; /* 必须定义宽度 */ word-break: break-word; /* 文本行的任意字内断开 */ word-wrap: break-word; /* IE */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP printers */ white-space: -o-pre-wrap; /

  • css与javascript跨浏览器兼容性总结

    本文以大量实例形式总结了css与javascript跨浏览器的兼容性问题.分享给大家供大家参考.具体总结如下: 一.CSS样式兼容性 1. FLOAT闭合(clearing float) 网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合,这也是div无法自适应高度的一个原因.如果父div没有设float而其子div却设了float的话,父div无法包住整个子DIV,这种情况一般出现在一个父DIV下包含多个子DIV.解决办法: 1) 给父DIV也设上float 2) 在

  • css实现兼容各个浏览器的技巧的代码

    在编写css样式表的时候常常会碰到一写浏览器兼容的问题,象是不同内核的浏览器显示就不一定相同,不同版本的的浏览器也会产生上下兼容的问题,如何解决这些问题成了我们苦恼的问题,如果你对css hack技术很了解的话,那这就是太简单不过了,不过对于那些不怎么解的人来说可真成了他们所苦恼的事.在这就从 赵磊官方博客 引来一篇文章来介绍兼容各个浏览器的技巧.但是你也不要认为只要是浏览器显示出现差错就事浏览器的问题,也很可能是你的结构不好,建议你好好去学习一下语义结构,毕竟盖房子要先搭钢筋的. 1,盒解释器

  • 不用js多浏览器兼容纯DIV/CSS对联漂浮广告代码

    纯DIV/CSS对联漂浮广告代码(无JS) 源码网两侧漂浮.经测试,兼容IE6,IE7,Firefox浏览器. CSS代码为: 复制代码 代码如下: .r1{width:80px;height:80px;background:red;float:right;          position:fixed !important; top/**/:200px;          position:absolute; z-index:300; top:expression(offsetParent.

  • CSS hack浏览器兼容一览表

    CSS hack浏览器兼容一览表

    CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧.这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助.

随机推荐