域名注册

中文域名
英文域名
通用网址
域名解析
域名转入\转出

虚拟主机

主机购买
管理主机
FTP上传
数据库管理
主机续费升级

网站建设

建站流程介绍
网站设计
网站改版
网站维护
网站推广

企业邮局

邮箱使用
管理邮箱
邮箱续费升级
全球邮局

网站优化

seo优化
seo技巧
收索引擎优化
关键词优化

网站备案

备案流程指南
修改备案
备案资料下载
备案小技巧

服务器租用

服务器租用
服务器托管

其它服务

400电话
在线客服
财务常见问题
会员常见问题

您的位置：创新互联 >> 网站建设 >> 网络建设基础知识 >> CSS Hack兼容各浏览器是否正常

CSS Hack兼容各浏览器是否正常

作者：曾小姐文章来源：成都网站建设点击数：469 更新时间：2012-01-14
大家现在对于CSS的知识有一定的了解了，但是CSS Hack兼容各浏览器是否正常的现象，大家是否有过研究呢？今天的话题，小编将会跟大家斟酌一下这种情况。CSS Hack是在标准 CSS 没办法兼容各浏览器显示效果时才会用上的补救方法，在这里，小编就不做深入CSS兼容性的讲解了。在各浏览器厂商解析 CSS 没有达成一致前，我们只能用这样的方法来完成这样的任务。在网络上上你可能能搜索到一大堆的 CSS Hack，但是小编今天发布的你可能并不都很了解，因为这些都是只针对单独一个浏览器的 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 条件注释了，小编想你在百度搜索引擎能搜索到上万个搜索条目，所以小编这里只要这两个:
　　
　　
　　使用 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 验证，所以小编在这里只是表达了自己的意见，具体情况还得朋友们自己权衡是否有必要去使用。但是，如果你遇到什么疑问，也欢迎您的咨询，成都创新互联网站建设，将竭诚为您服务！
上一篇文章：Marquee为什么不符合WEB标准？
下一篇文章：提取页面用到的CSS样式之雏形想法