浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer

zoukankan html css js c++ java

浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer – Leeiio Chaos Made.
sofish{ 2 padding:10px; 3 padding:9px\9; /* all ie */ 4 padding:8px\0; /* ie8-9 */ 5 *padding:5px; /* ie6-7 */ 6 +padding:7px; /* ie7 */ 7 _padding:6px; /* ie6 */ 8 }
浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer

http://leeiio.me/css-hack-for-firefox-opera-safari-ie/
CSS Hack 是在标准 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 根本不知道 > 选择符。同时你也得注意 > 选择符对于其他浏览器同样是无效的。

/* IE 7 */ html > body #ie7{*display: block;} /* IE 6 */ body #ie6{_display: block;}

CSS Hack 区分 Firefox

第一个使用了 body:empty 来区分 Firefox 1 和 2 。第二个 hack使用了全部 Firefox 浏览器的专有扩展 -moz。 -moz 只对 Firefox有效，使用这个 Hack 大可不必担心其他浏览器的影响。

/* Firefox 1 - 2 */ body:empty #firefox12{display: block;} /* Firefox */@-moz-document url-prefix(){#firefox { display: block; }}

CSS Hack 区分 Safari

Safari 的 CSS hack 与 Firefox 的 hack 看起来很像，使用的是 Safari浏览器的专有扩展 -webkit 且只对 Safari 浏览器有效。

/* Safari */@media screen and (-webkit-min-device-pixel-ratio:0){#safari { display: block; }}

CSS Hack 区分 Opera

/* 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</title><style type="text/css"> body p { display: none; } /* Opera */ html:first-child #opera { display: block; } /* IE 7 */ html > body #ie7 { *display: block; } /* IE 6 */ body #ie6 { _display: block; } /* Firefox 1 - 2 */ body:empty #firefox12 { display: block; } /* Firefox */ @-moz-document url-prefix() { #firefox { display: block; } } /* Safari */ @media screen and (-webkit-min-device-pixel-ratio:0) { #safari { display: block; } } /* Opera */ @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 验证，所以还得自己权衡是否有必要去使用。

-Via.

文中涉及资源页面
* http://msdn.microsoft.com/en-us/library/ms537512.aspx
* http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
* http://perishablepress.com/press/2006/08/27/css-hack-dumpster/
* http://thomas.tanreisoftware.com/?p=11#opera

-----------------------------------------------------------------------------------------------------

http://www.fantxi.com/blog/archives/ie8-ie9-css-hack/

<!doctype html><html ><head>< meta http-equiv ="Content-Type" content="text/html;charset=gb2312">

<meta content="kariryo,fantxi.com" name="author" />

<title> browser detector - css hacks 判断浏览器 update:2009-09-21 </title>

<style type="text/css" media="all">

div,h1 ,h2{ margin:0 ;padding: 0;}

body{font-size :12px; background:#444 ;color: #444;text-align :center}

h1,h2 {font-size: 14px;}

p{margin :10px 0 0;}

ol{margin-top :0;}

li{line-height :23px; border-bottom:1px solid #ccc ;}

li span {color :#fff; padding:2px }

#example{width :500px; height:30px ;line-height: 30px;font-size :16px; font-weight:700 ;margin: 20px auto 15px;padding :5px; color:#fff ;border: 10px solid #999}

#container{width :500px; margin:0 auto;padding: 5px;text-align :left; background:#f1f1f1 ;border: 10px solid #999}

/*css hacks start*/

#example{

background:#036 ;/*Moz (& All browsers)*/

_background:#F00 ;/*IE5 (& IE5.5/IE6)*/

/*/background:#630;*/

/*IE8 beta1

如果装了IE8 beta1绿色版之后,又安装了IE8 beta2,那么再用IE8 beta1绿色版访问此页,IE8 beta1显示效果为IE7

Ps:我是先装了IETester,后装Internet Explorer Collection测试发现是这样的,也许是装了Internet Explorer Collection使IETester的IE8内核变成了IE7?..

*/

background:#09F\0 ;/*IE8/IE9*/

background:#09F\0/ ;/*IE8 only*/

}

:root #example { background :#963\0 } /*IE9 only*/

#example/*IE5.5+*/{

+background:#f60 ; /*IE7 (& IE5.5/IE6),“+”可以写成“*”*/

_background:#000 ;/*IE6 (& IE5.5)*/

_background /*IE5.5*/ :#390;

/*IE8/IE9 也可写在这*/

}

@media all and (min-0) {/* webkit and opera */

#example{background:#f06 ;}

}

@media screen and (-webkit-min-device-pixel-ratio:0) {

#example{background:#609 ;}/*webkit (& Opera9.2)*/

}

/* webkit */

@media screen and (-webkit-min-device-pixel-ratio:0) { #example{} }

/* opera */

@media all and (-webkit-min-device-pixel-ratio:10000) , not all and (-webkit-min-device-pixel-ratio:0) { #example{} }

/* firefox * /

@-moz-document url-prefix() { #example{} }

/*

body:nth-of-type(1) #example {

   background: #ccc;

}

Google Chrome $ Safari 3+ & Opera 9.5

*/

/*css hacks end*/

</style>

<body>

        <div id="example">这里是测试区域, Here is a example </div>

        <div id="container">

               <h1> CSS判断您的浏览器版本 (比较常见的浏览器) </h1>

               <ol>

                      <li> IE5, 测试区域背景色为: <span style="background:#f00">红色(#F00) </span></ li>

                      <li> IE5.5, 测试区域背景色为: <span style="background:#390">绿色(#390) </span></ li>

                      <li> IE6, 测试区域背景色为: <span style="background:#000">黑色(#000) </span></ li>

                      <li> IE7, 测试区域背景色为: <span style="background:#f60">橘色(#f60) </span></ li>

                      <li> IE8 Beta1, 测试区域背景色为: <span style="background:#630">褐色(#630) </span></ li>

                      <li> FF2/FF3.0/K-Meleon, 测试区域背景色为: <span style="background:#036">蓝色(#036) </span></ li>

                      <li> Opera 9.5-9.6/FF 3.51-FF4, 测试区域背景色为: <span style="background:#f06">粉色(#f06) </span></ li>

                      <li> Safari,Google Chrome,Opera9.2, 测试区域背景色为: <span style="background:#609">紫色(#609) </span></ li>

                      <li> IE8, 测试区域背景色为: <span style="background:#09F">蓝色(#09F) </span></ li>

                      <li> IE9, 测试区域背景色为: <span style="background:#963">咖啡色(#963) </span></ li>

               </ol>

               <h2> 各种常见浏览器使用的内核 (Rendering Engine) </h2>

               <ol>

                      <li> Gecko: Firefox, Camino, Flock, Orca, Thunderbird, Seamonkey, Epiphany, NVU, Netscape, K-Meleon

</li>

                      <li> Trident: Internet Explorer, Avant Browser, Maxathon, Microsoft Outlook, Outlook Express, AOL Browser</ li>

                      <li> WebKit: Safari, Chrome, Adobe AIR, iCab, Epiphany (experimental), Konqueror (KHTML)

</li>

                      <li> Presto: Opera(7.0-10), Nintendo DS, Wii Internet Channel, Macromedia Dreamweaver MX and above, Adobe CS 2 and above

</li>

                      

               </ol>

               <p>

                     测试环境：以上测试的浏览器都是在Windows系统:IE5, IE5.5, IE6, IE7, IE8 , Opera 9.5, Firefox 3, Safari4,K-Meleon,Google Chrome。<br />

                     最后很重要的一点：只要结构写的好,不需要hack大部分也都能兼容。能不用hack就不用。

               </p>

        </div>

        <p> by: <a href="http://www.fantxi.com/blog/"> kariryo</a ></p>

</body>

</html>
查看全文

相关阅读:
SQLMAP注入教程-11种常见SQLMAP使用方法详解
 VS2012/2013/2015/Visual Studio 2017 关闭单击文件进行预览的功能
 解决 IIS 反向代理ARR URLREWRITE 设置后，不能跨域跳转 return Redirect 问题
 Spring Data JPA one to one 共享主键关联
 JHipster 问题集中
 Spring Data JPA 定义超类
 Spring Data JPA查询关联数据
 maven命名
 maven仓库
 Jackson读取列表

原文地址：https://www.cnblogs.com/0banana0/p/2949414.html

浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer – Leeiio Chaos Made.

浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer

使用 IE CSS 条件注释区分 IE 浏览器

使用 CSS 解析器 Hacks 区分 IE

CSS Hack 区分 Firefox

CSS Hack 区分 Safari

CSS Hack 区分 Opera