CSS 技巧和浏览器检测

CSS 的问题

过去，使用CSS的主要问题在于浏览器支持不足。现在情况已不再如此，因为版本 5 的浏览器，它们都对CSS有很好的支持，目前已占到使用浏览器总数的 99% 以上。

相反，问题在于浏览器有时会以不同的方式解释 CSS 命令，这会让开发者们大失所望，转而使用像素完美的表格布局。不过别担心，随着你对CSS的了解越来越深入，你将逐渐理解不同的浏览器解释方式，并意识到它们其实并没有那么多。

使用CSS技巧进行浏览器检测的工作原理

使用CSS技巧进行浏览器检测的工作原理是向你试图欺骗的浏览器发送一条CSS规则，然后向其他浏览器发送第二条CSS规则，覆盖第一条命令。如果你有两条CSS具有相同的选择器，那么第二条 CSS 规则将始终优先。

举个例子，如果你想让标题区域和内容之间的空间在 Internet Explorer 中有 25px 的间隙，或者IE（它被亲切地称为）。这个间隙在IE中看起来不错，但在 Firefox、Opera 和 Safari 中，这个间隙非常大，10px 的间隙看起来要好得多。为了在所有这些浏览器中达到完美的效果，你需要以下两条CSS规则

#header {margin-bottom:25px}
#header {margin-bottom:10px}

第一条命令是针对 IE，第二条是针对所有其他浏览器。这如何工作？嗯，目前它还不行，因为所有浏览器都能理解两条CSS规则，所以会使用第二条CSS规则，因为它在第一条规则之后。

通过插入一个CSS技巧，我们可以通过隐藏第二条CSS规则来执行浏览器检测。这意味着IE根本不知道它的存在，因此会使用第一条IE规则。我们怎么做到这一点？继续阅读，找出答案！CSSInternet Explorer 的浏览器检测

要向

发送不同的CSS规则，我们可以使用IE无法理解的子选择器命令。子选择器命令包含两个元素，其中一个元素是另一个的子元素。因此，html>body 指的是父元素html 中包含的子元素body。IE以页眉边距为例，我们的

命令将是CSS无法理解第二条

#header {margin-bottom:25px}
html>body #header {margin-bottom:10px}

IE规则，因为html>bodyCSS命令，所以会忽略它并使用第一条规则。所有其他浏览器将使用第二条规则。CSSInternet Explorer 5 的浏览器检测

一开始，向不同版本的浏览器发送不同的

规则可能看起来很奇怪，但对于CSS5 来说，这是非常必要的。这是因为IE5 错误地解释了盒模型。在IE中指定元素的宽度时，内边距和边框不包含在此值中。CSS然而，5 会将这些值纳入宽度值，导致在此浏览器中元素宽度变小。IE以下

规则将为所有浏览器提供 10em 的宽度，但对于CSS5，它将只提供 5em 的宽度（IE5 在计算宽度时将包含左右两侧的两组内边距和边框）。IE解决这个问题的方法？由 Tantek Çelik 发明的盒模型技巧。Tantek Çelik 因此在

#header {padding: 2em; border: 0.5em; width: 10em}

界声名鹊起。看到他提出的方案，确实是名副其实。要执行浏览器检测并向 IE5 发送不同的CSS规则，你将使用CSS他是如何想出办法的，这我们不得而知！重要的是它有效：IE5 将使用第一个 15em 的宽度值，其中 5em 将由两组内边距和边框（左右各一组）占据。这最终将使元素在CSS中具有 10em 的宽度。

#header 
{
    padding: 2em; 
    border: 0.5em; 
    width: 15em; 
    voice-family: "\"}\""; 
    voice-family:inherit; 
    width: 10em
}

15em 的值将被除 IE5 之外的所有浏览器用第二个 10em 的宽度值覆盖，原因不明，它无法理解那些波浪线之后紧接着的IE5.

命令。它看起来不美观，但确实有效！CSSMac 上的 Internet Explorer 的浏览器检测

简单来说，

在 Mac 上与IE会产生奇怪的结果。该浏览器已变得有些过时，因为微软将不再发布更新版本。因此，许多网页开发者会编写CSS-驱动的网站，以便在CSS/Mac 上运行，尽管它可能无法提供相同的先进功能或设计水平。只要IE/Mac 用户能够访问网站的所有区域，这就被认为是可行的做法。IE要使用IE/Mac CSS 技巧隐藏命令很简单，只需将一组破折号和星号围绕任意数量的

规则即可CSS。 /Mac 将简单地忽略所有这些命令。这个

/* Hide from IE-Mac \*/
#header {margin-bottom:3em}
#footer {margin-top:1.5em}
/* End hide */

IE技巧实际上很有用，如果网站的某个区域在CSS/Mac 上无法正常工作。如果该部分对使用网站来说不是关键部分，你可以简单地将其隐藏，不让IE/Mac 显示，如下所示IE第一条

#noiemac {display: none}

/* Hide from IE-Mac \*/
#noiemac {display: block}
/* End hide */

规则隐藏了分配给 noiemac ID 的整个部分（即<div id="noiemac">）。第二条CSS规则，CSS/Mac 看不到，会显示这个部分。IENetscape 4 的浏览器检测

Netscape 4 对

的支持有限且有些不稳定。在这个浏览器（其市场份额已远低于 1%）中进行CSS布局可能极具挑战性。如今，普遍的做法是完全从该浏览器隐藏CSS文件。这可以通过使用 @import 指令来调用CSS来实现。Netscape 4 将显示一个非样式化的网站版本，因为它无法理解此 @import 指令。CSS文档

<style type="text/css">@import url(cssfile.css);</style>

在不同浏览器中检查你的网站

在撰写本文时，主要的 Internet 浏览器包括

6、Firefox、Opera 和 Safari。（查看 TheCounter.com 获取最新的浏览器统计数据。）你可以在 Evolt 浏览器档案下载所有这些浏览器以及一些更冷门的浏览器。如果你不确定如何操作，请了解如何在你的IE5, IE上安装多个版本的IE。PC.

理想情况下，你应该在所有这些浏览器中检查你的网站，无论是在 PC 还是 Mac 上（除了IE6 和 Safari，它们分别仅在PC和 Mac 上可用）。如果你无法访问 Mac，你可以通过运行 Dan Vine 的iCapture 来获取 Safari 截图，或者你可以付费使用 Browsercam，它提供更广泛的屏幕截图服务。

结论

总的来说，现代浏览器对CSS有非常好的支持——当然足够你使用CSS来控制布局和表现。但有时，某些页面元素在不同的浏览器中显示会不同。如果你不知道原因，不用太担心——如果你能用这些CSS技巧解决它，你的网页在所有浏览器中都应该看起来很棒！