css hack

瀏覽器專屬 CSS Hack:區分 Firefox / Opera / Safari / Internet Explorer

瀏覽器專屬 CSS Hack:區分 Firefox / Opera / Safari / Internet Explorer
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 條件注釋了，我想你在搜索引擎能搜索到上萬個搜索條目，我這裡只要這兩個:

<!--[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 根本不知道 > 選擇符。同時你也得注意 > 選擇符對於其他瀏覽器同樣是無效的。

/* 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

分享到：

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

瀏覽器專屬 CSS Hack:區分 Firefox / Opera / Safari / Internet Explorer

使用 IE CSS 條件注釋區分 IE 瀏覽器

使用 CSS 解析器 Hacks 區分 IE

CSS Hack 區分 Firefox

CSS Hack 區分 Safari

CSS Hack 區分 Opera

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

css hack

瀏覽器專屬 CSS Hack:區分 Firefox / Opera / Safari / Internet Explorer

使用 IE CSS 條件注釋區分 IE 瀏覽器

使用 CSS 解析器 Hacks 區分 IE

CSS Hack 區分 Firefox

CSS Hack 區分 Safari

CSS Hack 區分 Opera

评论

发表评论

相关推荐

Web开发者不容错过的20段CSS代码

css设置透明层

盒模型嵌套元素外边距重叠问题

css px em pt

CSS对浏览器的兼容性

css 浏览器兼容性解决方法

最近访客更多访客>>