再谈CSS Hack各浏览器兼容问题

2020-03-24 17:01:04

字体：大中小

来源：转载

供稿：网友

关于CSS Hack的介绍建站学有不少文章，我们今天再次谈这个问题，为了向你展示这些CSS Hack 是否正常运作，我新建六个 P 标签，并给每一个 P 标签一个特有的 id。这将向你展示 CSS Hack 的运作情况。
p id="opera" 我来自 Opera 7.2 - 9.5 /p
p id="safari" 神马是 Safari /p
p id="firefox" 我来自 Firefox /p
p id="firefox12" 我是你爷爷 Firefox 1 - 2 /p
p id="ie7" 我是囧 IE 7 /p
p id="ie6" 我是犀利哥 IE 6 /p
然后我让这些 P 标签默认都不显示
style type="text/css" body p{display: none;} /style
使用 IE CSS 条件注释区分 IE 浏览器最简单的区分 IE 浏览器的方法自然是使用他们的条件注释。微软创建了一个强大的语法来让我们去实现这个功能。我不想再详细地介绍 IE 条件注释了，我想你在搜索引擎能搜索到上万个搜索条目，我这里只要这两个:
!--[if IE 7]
style type="text/css"
/style ![endif]--
!--[if IE 6]
style type="text/css" /style
![endif]--

使用 CSS 解析器 Hacks 区分 IE 虽说 IE 条件注释十分简单好用，但是如果你想把全部的 CSS 放到一个文件里的话，那么你不得不使用别的方法。注意这里的 IE 7 Hack将只对 IE7 有效，因为 IE6 根本不知道选择符。同时你也得注意选择符对于其他浏览器同样是无效的。
html body #ie7 {*display: block;}
body #ie6 {_display: block;}
CSS Hack 区分 Firefox 第一个使用了 body:empty 来区分 Firefox 1 和 2 。第二个 hack使用了全部 Firefox 浏览器的专有扩展 -moz。 -moz 只对 Firefox有效，使用这个 Hack 大可不必担心其他浏览器的影响。
body:empty #firefox12 {display: block;}
@-moz-document url-prefix() {#firefox { display: block; }}

CSS Hack 区分 Safari Safari 的 CSS hack 与 Firefox 的 hack 看起来很像，使用的是 Safari浏览器的专有扩展 -webkit 且只对 Safari 浏览器有效。
@media screen and (-webkit-min-device-pixel-ratio:0) {#safari { display: block; }}

CSS Hack 区分 Opera
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {head~body #opera { display: block; }}

然后，全部合在一起便是
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"
html lang="en"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"
title CSS Browser Hacks - webjx.com /title
style type="text/css"
body p {
display: none;
}
html:first-child #opera {
display: block;
}html body #ie7 {
*display: block;
}body #ie6 {
_display: block;
}body:empty #firefox12 {
display: block;
}

@-moz-document url-prefix() {
#firefox {
display: block;
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari {
display: block;
}
}@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
head~body #opera {
display: block;
}
}
/style
/head
body
p id="opera" 我来自 Opera 7.2 - 9.5 /p
p id="safari" 神马是 Safari /p
p id="firefox" 我来自 Firefox /p
p id="firefox12" 我是你爷爷 Firefox 1 - 2 /p
p id="ie7" 我是囧 IE 7 /p
p id="ie6" 我是犀利哥 IE 6 /p
/body
/html
CSS Hack 虽好且方便兼容各浏览器，但是通不过 W3C 验证，所以还得自己权衡是否有必要去使用
html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：DIV+CSS技术入门学习

下一篇：HTML文档结构对Div+CSS布局的意义