如何创建仅限 IE 的样式表 | CSS-Tricks

本文已从旧版本（最初发布于 2007年9月24日）更新。我只是想扩展它并使其更清晰。

如果您阅读此博客，则有 99% 的可能性您遇到过 IE 带来的令人抓狂的体验。但如果您是一位称职的 CSS 编码员，您应该能够处理它。我认为，您可以处理 IE 抛出的任何问题，而无需使用 hack。Hack 非常危险，因为它们基于非标准的漏洞利用，您无法预测它们在未来浏览器中的行为。解决 IE 问题的首选工具是**条件样式表**。IE 提供注释标签，一直支持到当前的 IE 8，用于定位特定版本，以及大于/小于符号用于一次定位多个版本。

为什么要使用条件样式表？

您遇到了问题，需要解决它们。
保持您的代码无 hack 并有效。
保持您的主要样式表整洁。
完全可接受的技术，微软认可。

请记住，这些条件标签不必仅用于 CSS。您可以加载 JavaScript，甚至可以在网站内容中使用它们来显示特定于 IE 的特殊消息。

代码

这将与所有其他常规 CSS 链接的 CSS 文件一起放在您的 <head> 中。开始和结束标签应该很熟悉，那只是普通的 HTML 注释。然后在括号之间，“IF”和“IE”应该很明显。需要注意的语法是“!”代表“非”，所以 !IE 表示“非 IE”。gt表示“大于”，gte表示“大于或等于”，lt表示“小于”，lte表示“小于或等于”。

请注意，IE 10 及更高版本完全不支持条件注释。

定位所有版本的 IE

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

定位除 IE 之外的所有浏览器

<!--[if !IE]><!-->
	<link rel="stylesheet" type="text/css" href="not-ie.css" />
 <!--<![endif]-->

仅定位 IE 7

<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

仅定位 IE 6

<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

仅定位 IE 5

<!--[if IE 5]>
	<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

仅定位 IE 5.5

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

定位 IE 6 及更低版本

<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

<!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

定位 IE 7 及更低版本

<!--[if lt IE 8]>
	<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

<!--[if lte IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

定位 IE 8 及更低版本

<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

<!--[if lte IE 8]>
	<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

目标 IE 6 及更高版本

<!--[if gt IE 5.5]>
	<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

<!--[if gte IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

目标 IE 7 及更高版本

<!--[if gt IE 6]>
	<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

<!--[if gte IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

目标 IE 8 及更高版本

<!--[if gt IE 7]>
	<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

<!--[if gte IE 8]>
	<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

目标 IE 10

阅读本文。

通用 IE 6 CSS

处理 IE 6 及以下版本始终是一个特殊的挑战。如今，包括大型企业、大型网络应用，甚至政府在内，人们都在放弃对它的支持。除了任由网站陷入困境之外，还有更好的解决方案，那就是为 IE 6 及以下版本提供一个精简的特殊样式表，然后为 IE 7 及以上版本（以及所有其他浏览器）提供常规的 CSS。这被称为通用 IE 6 CSS。

<!--[if !IE 6]><!-->
  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<!--<![endif]-->

<!--[if gte IE 7]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<![endif]-->

<!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />
<![endif]-->

Hack

如果必须……

仅限 IE-6

* html #div { 
    height: 300px;
}

仅限 IE-7

*+html #div { 
    height: 300px;
}

仅限 IE-8

#div {
  height: 300px\0/;
}

IE-7 & IE-8

#div {
  height: 300px\9;
}

非 IE-7 浏览器

#div {
   _height: 300px;
}

隐藏于 IE 6 及更低版本

#div {
   height/**/: 300px;
}

html > body #div {
      height: 300px;
}

反对条件样式表的论点

我们不应该需要它们。它们违背了网络标准的精神。

支持条件样式表的论点

是的，但我们确实需要它们。

其他资源

Jermayn Parker

# 2007年9月24日

虽然我同意使用针对IE的hack是一种不干净的方法，但我个人不同意使用IE 6和IE 7的选择器（*html，*等），因为我认为它们很有用，可以帮助你将设计更接近像素完美。

关于min-height/ min width问题，我个人使用了一个hack（在这里阅读），因为它让我的生活更轻松……
基本上我唯一会使用的其他hack是针对IE6的png（也在这里阅读我如何使用它）

Jamie

评论永久链接# 2010年1月20日

你的链接似乎不起作用，伙计，但我猜你指的是在IE6中用于min-width/height的表达式，我确实个人使用它，以及用于png的'background:none;filter:progID:DXImageTransform'….等样式表修复 - 我也使用它，我看不到更简洁的方法来做这两件事，而且我相信这两者都可以使用。

Jermayn Parker

# 2007年9月24日

顺便说一句，我很想知道你关于如何在没有我上面提到的hack的情况下解决这些问题的技巧……

Romz

# 2007年9月24日

多么棒的文章。我已经了解了这项技术，甚至还在使用它，但这篇文章解释得很好！干得好！

Graham Bannister

# 2007年9月25日

干得漂亮，Chris，继续努力。

ROCKFUSE|blog

# 2007年9月25日

嘿，Chris.. 发现这篇文章非常有用.. 干得好！

Tom

# 2008年7月19日

嘿，谢谢，这正是我需要的！天啊，我讨厌IE！

Randy

# 2008年8月28日

你知道微软是故意这么做的。现在比尔跳槽了，也许他们可以把事情做好。还要密码保护注册表微软！Chris，你的网站做得很好，我爱波特兰。

enrique

# 2008年10月15日

非常有用的帖子，感谢你指导人们了解css的最佳实践。

Ace_ov_Spade

# 2008年10月22日

下划线hack，例如[ _height: 300px; ]，适用于非IE-7。但有一个问题：[ _height: –300px; ]不起作用

andy

# 2008年12月2日

* html #div {
height: 300px;
}

仅适用于IE7？

从未使用过 - 我使用

*:first-child+html "选择器"
height: 300px;
}

这是我用于IE6的方法

* html "选择器"
height: 300px;
}

evophp

# 2009年1月8日

感谢你的帖子。IE8快把我逼疯了！有没有办法创建一个只包含hack的单独的sheet，如果使用IE，它会打开并覆盖正常的CSS？不太顺利:(

Adam

# 2009年1月31日

感谢你的条件语句！帮我解决了难题。

（可能只是我，但你可能想在IE6中查看此页面。每个人的小图片都覆盖了他们的姓名和部分文字。）

Konstantin

# 2010年1月20日

该死，又是关于hack IE的帖子:)好吧，这些hack有时确实有效，所以感谢你列出它们，Chris！干杯！

~ K.

Chris

# 2010年1月20日

我更喜欢在global.css文件中包含条件样式表内容 - 这意味着你减少了header请求（好吧，一个请求不是世界末日，但我有点强迫症），并且在开发时不会花费大量时间在样式表之间切换（使用“非IE”条件）

<!-- BEGIN: Site container -->    
<!--[if !IE]><!--><div class="container"><!--<![endif]-->
<!--[if IE 8]><div id="ie8" class="container"><![endif]-->
<!--[if IE 7]><div id="ie7" class="container"><![endif]-->
<!--[if lte IE 6]><div id="ie6" class="container"><![endif]-->

然后只需从global.css中引用这些ID。

/*	IE FIXES: IDs applied to "div.container"
	-------------------------------------------------- */
	#ie6 {}
	#ie7 {}
	#ie8 {}

使用“!important”或堆叠父ID/类，你可以轻松地覆盖样式并将修复保留在一个地方。

注意：应归功于应得的人；我没有想出这种技术，但我记不起是谁想出来的，所以如果有人知道，请回复！

Josh

评论永久链接# 2010年1月20日

我喜欢这个。你也可以使用PHP生成ID来进一步清理HTML。
Kristoffer

评论永久链接# 2010年1月21日

如果我错了，请纠正我，但我认为IE在!important方面有一些“问题”。
Chris

评论永久链接# 2010年1月21日

我从未遇到过。IE6在继承方面存在问题，但使用多个选择器（父元素）应该可以工作 - ID通常可以工作！

肯定有方法可以改进它 - 使用php会非常有效！
Tim Mackey

评论永久链接# 2010年1月27日

Chris，在你这条评论中的示例中，你正确地使用了“如果不是IE”语法

 *内容* 

但是，在文章中，你写成了



你在文章中写的内容实际上不起作用；浏览器将其视为注释。里面的任何内容都不会显示在任何浏览器中。你可能应该更正文章以反映这一点，以免人们感到困惑。
不过，感谢你的文章！很高兴能在一个地方收集所有这些变体。
stansult

评论永久链接# 2010年2月2日



在我的IE7中有效

Long Island Web Design

# 2010年1月20日

不错的帖子... 非常有益
感谢分享
但我有一个问题......是否有任何CSS属性可以使IE中的字体平滑？
等待回复

Jordan Walker

# 2010年1月20日

为什么最近任何带有微软品牌名称的东西都无法达到标准？零日漏洞利用、关键补丁星期二、IE 漏洞。很难想象一家产品有缺陷的公司还能继续经营。

我想这说明了 Redmond（微软总部所在地）缺乏创新和独创性。

Josh

评论永久链接# 2010年1月20日

算了吧。我们不需要抨击微软。你见过 IE 8 吗？它在渲染页面方面表现还不错，而且比以前的版本安全多了。至于关键补丁星期二——就说当你的市场份额达到 85% 时，有些人会对你不利。别担心，很快你也会在你的 Mac 上遇到需要提防的病毒。我承认，我主要使用我的 MacBook，但我也很喜欢我的 PC。
Lampica

评论永久链接# 2010年1月20日

什么？你在开玩笑吗？与旧版本的 IE 相比，IE8 仅仅是勉强过得去。就像一辆坏了的车，但现在至少它有轮子可以拖动了。它仍然是一辆需要拖走的坏车。IE8 勉强支持当今标准的最低限度。但它仍然通过不支持伪选择器等基本内容，以及在展望更高级功能时 IE 方面没有任何支持，给我们带来了麻烦。几年后，如果 IE8 没有成为 web 开发的祸根，以及阻碍我们前进的主要因素，我会感到震惊。它今天勉强过关，几年后它将成为一场噩梦，就像现在的 IE6 一样。

真的，微软对 IE 的整体策略一直都很糟糕，一直都是，而且没有改变。更新之间间隔几年？我想这样是为了让数百万个依赖 IE 的缺点才能正常工作的网站有时间建立起来。IE8 没有体现出他们糟糕的行动方式有任何改变。

我认为微软仍然是一家成功的企业，这清楚地表明了我们经济的弊端。即使是 MS Office 也已成为一个复杂的应用程序集合。我曾经觉得至少 Office 是一款可靠的产品，但我去年切换到 Open Office，并且一直对它很满意。

微软在过去 10 年中发布了多少个新的操作系统版本？然而 XP 仍然是标准，而 XP 很糟糕，只是没有比微软在过去十年发布的其他所有东西更糟糕而已。

我的意思是，还有谁会故意支持数百个 bug，因为他们等待了这么久才修复这些 bug，以至于如果他们现在不支持这些“遗留”bug，“互联网就会崩溃”？仿佛互联网根本不需要微软的任何帮助就能完美运行。
Jordan Walker

评论永久链接# 2010年1月21日

虽然我确实理解软件开发周期，并且知道每个版本都会解决很多问题。我只是想说，鉴于目前的市场份额和 Internet Explorer 在该市场中花费的时间，一个更好的产品肯定会出现。

而且我不会在我的 SE 版 Linux 上提防病毒！

riccardo

# 2010年1月20日

最后一个例子通用 IE 6 CSS 是

而不是

David Walsh

# 2010年1月20日

黑客万岁。

它们不占用太多空间，而且我讨厌处理多个样式表。它们也是额外的请求。在主样式表中使用黑客还可以跳过条件注释。

Chris Coyier

评论永久链接# 2010年1月20日

我的主要担忧是，如果 IE 9 发布，并且原本应该针对 IE 6 或 7 的黑客突然在 IE 9 中搞砸了东西。那将很糟糕。使用条件注释永远不会发生这种情况。
Héctor Guedea

评论永久链接# 2010年1月20日

我同意你的观点，但 IE 的发展是渐进的，而不是回顾性的，所以当我看到 IE9 的新功能时，我发现它们非常有趣，例如标准、SVG 等。我认为与 David Walsh 的想法一样。
David Walsh

评论永久链接# 2010年1月20日

我理解你的观点，但我认为应该使用“模拟”元标记来防止此问题。
Jerad

评论永久链接# 2014年5月21日

我知道这是一个 4 年前的评论，所以不知道你是否会看到我的回复，但你见过这个黑客吗？http://www.limecanvas.com/css-hacks-targeting-ie-10/

我很想知道你的想法，因为它有点像两全其美。

elias

# 2010年1月20日

一如既往，Chris 的文章很棒。关于政府停止支持 IE6，我们在一年以前就做了，许多其他机构也纷纷效仿。

Sam

# 2010年1月20日

<!--[if !IE]>
	<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]-->

应该是

<![if !IE]>
	<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>

Jeremie

# 2010年1月20日

好吧，我同意使用条件注释是避免（或处理）一些 IE6（有时是 IE7）限制或特性的好方法（可能是最好的方法）。

但我不知道使用“除了 IE 之外的所有目标”是否是一个好主意。

我强烈建议使用每个浏览器（包括 IE）都会使用的常规样式表，并添加一些 IE 特定样式表，这些样式表将覆盖常规样式表中可能困扰 IE 的一些 CSS 选择器和属性。

我认为使用级联比维护 2 个特定样式表要安全得多。

Niall

评论永久链接# 2010年3月9日

是的，请在 css 中加上 c！

Daniel

# 2010年1月20日

当 IE6 最终消亡时，派对将是多么盛大……

Jason

评论永久链接# 2010年1月20日

这是一个不错的“墓碑”
Deesh

评论永久链接# 2014年5月20日

IE 6 已经死了

Anton

# 2010年1月20日

仅限 ie8 的示例：]

#add{height/*\**/:25px;}

Steven L Braun

# 2010年1月20日

难道还不明显吗？使用IE的用户真的不在乎网页长什么样？给他们Helvetica（对他们来说太好了）和Times字体就行了。把你的辛勤工作留给那些懂得欣赏的人；那些使用现代浏览器的用户。使用你的CSS 3，停止使用JavaScript来为IE6-7美化页面。
停止支持IE。微软现在也在这么做。http://www.abc.net.au/news/stories/2010/01/19/2795684.htm

老家伙

评论永久链接# 2010年1月21日

每个人都应该问问他们的母亲（和祖母）正在使用哪个版本的浏览器。在向她们解释什么是浏览器之后，你可能不会对她们不知道自己使用的是哪个版本感到惊讶。也不会对她们不知道如何升级感到惊讶。这不是因为她们不在乎，而是她们不知道怎么做。

我并不是提倡为了支持一个过时的浏览器而额外进行完整的重新设计，但请有点同情心。添加一个单行的条件语句来给予他们一点支持，这并不需要太多工作。

网络不仅仅是为了精通技术的人。

Jon

# 2010年1月20日

只有我一个人注意到CSS Tricks在IE6中没有样式吗？

网站根本没有任何视觉元素。我发现你发布关于IE6样式的文章很奇怪，因为在某种程度上，你并没有费心去处理它。

Chris，这是为什么吗？

Chris Coyier

评论永久链接# 2010年1月20日

它确实有一些样式。我使用了通用IE 6 CSS（参见上文）。
Josh

评论永久链接# 2010年1月20日

哈哈，这实际上有点好笑:P
Josh

评论永久链接# 2010年1月20日

不，他确实费心了。如果他不费心，你就会看到IE 6以任何方式渲染的常规样式。相反，你看到的是一个半裸的、比你原本看到的更易读的版本。

Damian Web

# 2010年1月20日

我不能说我在设计时曾经使用过修复或单独的样式表，我创建的大多数设计即使IE6显示的内容略有不同，但仍然看起来“正常”。我可能比普通人花更多的时间在我的样式表上，但这非常值得，这样你只需要一个样式表，而不需要任何修复。

而且考虑到IE6的使用量每年都在下降，如果某些东西在其他浏览器中不太一样，我不会100%地感到沮丧。

取消冒泡

# 2010年1月20日

另一个“hack”的忠实粉丝，而不是维护多个样式表。

使用正确的/有效的文档类型。
使用CSS重置。

p {
color:blue; 良好的浏览器
*color:red; ie 7及以下
_color:green; ie6及以下（覆盖任何ie7的特定样式）
}

只需在样式表的顶部记录*和_，以供任何可能不知道它们含义的人使用。这样，你的代码中每个hack的作用就变得非常清晰。

Chrissy

评论永久链接# 2010年1月20日

这些也是我使用的hack，是我偏好的方法。与其他正常样式一起查看它们要容易得多。

此外，对于IE8，我使用以下方法

p {
color: black\9;
}

Kartlos Tchavelachvili

# 2010年1月20日

这是我针对IE6的标准方法

Chris，
在“其他资源”中，你应该包含此网站，它全部关于IE6的bug：http://www.virtuosimedia.com/tutorials/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs

Will

评论永久链接# 2010年1月20日

该链接指向一个PDF/Exploit.Gen木马。

Oleg

# 2010年1月20日

IE6和IE7/8的用户越来越少，IE7/8的渲染效果与Firefox几乎相同。希望在不远的将来，每个人都将使用兼容的浏览器，我们不必为这些浏览器创建单独的样式表。

Josh

# 2010年1月20日

好的，所以我才刚刚开始使用条件语句，因为我们最近有一些布局无法普遍使用。

我对你的样式表是如何构建的有点好奇。你是否只是创建了.css文件的三个副本，分别用于IE6、7+和FF，并且每个副本都是完整的样式表，但适应了元素？

或者你是否只在这些条件.css中包含页面元素（pagewrap、container、content等）？然后你还有另一个.css包含所有表单、p、h1等内容？

或者你只需要在条件.css文件中修复1或2个div，IE就会覆盖那个div？

Chris Coyier

评论永久链接# 2010年1月20日

你应该先列出你的主要样式表，然后在后面列出条件样式表。这样，你的条件语句就会覆盖任何需要调整的小东西。
Josh

评论永久链接# 2010年1月20日

太好了，谢谢！这比我们之前做的要好得多——我们之前只是复制了相同的样式表，并修改了一些元素。与我们本可以做到的相比，这真的很混乱。

r_jake

# 2010年1月20日

我不喜欢hack，单独的样式表可能需要额外的请求，但它通常是一个非常小的文件，并且使维护变得更容易。

话虽如此，我之前遇到过一个有趣的场景，我需要一个条件注释来定位*所有*浏览器（包括非IE！）*除了*IE6，因为我的客户坚持使用的嵌入式.swf会导致它崩溃。Stu Nicholls用一系列我认为是hack的东西来解决了这个问题

http://www.cssplay.co.uk/menu/conditional.html

这使我能够为所有浏览器嵌入.swf，除了IE6，它只显示静态图像。

Lampica

评论永久链接# 2010年1月20日

我不明白为什么这会成为问题。我也看不出为什么你要反转你的措辞“除IE6之外的所有浏览器”，因为你实际上只需要针对IE6。

也许正是你奇怪的反转措辞导致了你最初的麻烦（因为你看错了）。你只需要一个针对IE6的条件样式表，其中包含类似.display:none;的内容。因为这样，任何嵌套在获得.display:none;内容中的东西都不会被下载（不像.visibility:hidden;，其中内容仍然存在，但不可见）。

如果由于某种原因这不起作用，你仍然可以使用HTML中的条件注释在你的SWF前后添加一些注释标签。这样，只有在IE6中，SWF才会被注释掉。不确定这是否有效，因为条件注释可能包含或不包含注释，但也有其他方法。

例如，使用单个IE6条件注释在SWF的文件名中添加几个字符，从而使IE6指向一个不会导致其崩溃的不同文件。

有100多种方法可以解决此类问题，方法是仅针对IE6。因此，说你确实需要针对除IE6之外的所有内容是本末倒置，只会使问题更加混乱。你需要针对IE6，对此没有任何特别之处。
r_jake

评论永久链接# 2010年1月24日

是的，也许你是对的。我想我只是被反向做事带来的兴奋冲昏了头脑……

Sam Logan

# 2010年1月20日

感谢您提供条件语句和有用的技巧，我知道您“不应该”使用它们，但有时在处理IE6时，这是唯一解决方案。

Saqib Ansari

# 2010年1月20日

很棒的技巧。这些对于IE来说是最有用的技巧。

谢谢

Snapper Cridge

# 2010年1月20日

我在阅读了大量关于Google-China-IE-漏洞-等等的文章后，读到了这篇文章。我很高兴我的小型企业市场不想担心他们的网站是否在IE6中运行。这主要是因为我指出了过时且不安全的东西的危害！我在我当前的3个项目中使用了CSS-Tricks上找到的一段很棒的JavaScript代码，并将将其添加到所有未来的项目中。我的想法是，迎合有问题的的东西永远不会让它真正得到修复。滚蛋吧IE6，你这个该死的家伙！

Joe

# 2010年1月20日

Chris，谢谢……你刚刚为我节省了未来很多时间。我仍然清晰地记得！怀念！凌晨3点还在加班完成一个交付任务，一切都很顺利，除了IE6兼容性……如此美好的回忆……不再有了！

Montana Flynn

# 2010年1月20日

我一直都在找这个！但我想知道有多少浏览器支持!IE规则？我的意思是，不把它放在注释里，直接使用常规链接不是更好吗？

Roy

# 2010年1月21日

为什么要首先使用黑客手段，只需下载并使用条件CSS，http://conditional-css.com/

Arpit

评论永久链接# 2010年1月22日

我尝试了这个示例，但我需要针对不同浏览器使用不同的CSS，该示例无法完美运行。请您尝试一下并告诉我。

Soma

# 2010年1月21日

在设计和编写网站15年后，我逐渐到了能够在不使用任何IE特定CSS或黑客手段的情况下完成任何布局的程度，除了可能png之外。这使得网站的处理和生活变得更加轻松。我现在嘲笑其他人需要单独的IE6/7/8等等样式表……噩梦！

当我编写代码时，我通常会在过程中快速查看IE6/7/8，以确保一切正常，但很少需要调整某些东西。大多数事情都可以精确到像素，有时您只需要接受细微的差异。它也取决于您如何设计布局以及您的期望是什么。多年来，我一直像疯了一样花费大量时间创建IE样式表并使用黑客手段，只是为了让它向左移动2个像素，并且不知道更好的方法或想要改变尝试不同的方法。真是浪费。

减少HTML代码，并尽可能使用最少的代码以及填充/边距和浮动等的正确方法，这被证明是可行的方法。当然，了解在不同浏览器中可能出现什么问题以及可能导致什么问题，以及针对每个新项目尝试不同的方法而不是坚持“我总是这样做”也有很大帮助。

AL

评论永久链接# 2010年1月21日

我必须同意@soma的观点。我从未需要过特定的IE 6/7/8黑客手段——只需在所有（好吧，尽可能多的）浏览器中编写代码时进行测试，如果它在IE中确实出了问题，就解决它。你是设计师——这是一个挑战！——我被教导的网页设计的第一条规则“干净、布局良好的页面更容易阅读，访客更满意，网页更可信”。
偶尔会遇到png的情况，但此站点上某个地方有一篇关于此快速简易解决方法/黑客文章。如上所述——学习基础知识并学好（填充、边距、浮动、“display: inline;”）——并在此基础上构建。
Josh

评论永久链接# 2010年1月29日

我有点同意，大多数情况下，可以生成适用于大多数浏览器的css。根据我的经验，我发现例外情况是a. 使用其他人的插件（jQuery插件等）和b. 从其他设计师那里继承的项目。除了这两种情况之外，我通常不需要使用条件注释。

# 2010年1月21日

通过使用条件样式表，您会让您的IE用户为条件项额外发送一个HTTP请求。1听起来不多，但如果您使用像IE这样的垃圾浏览器。每个请求都对拥有良好性能的网页至关重要。

因此，我建议使用CSS黑客手段。

哦，您忘记了针对IE7及更低版本的星号黑客

*background:red;

paul

# 2010年1月21日

您如何看待Google的IE8.js？

r_jake

评论永久链接# 2010年1月24日

它实现了其声明的功能，并且可以很好地使旧版IE识别一些更高级的CSS选择器，但它相当庞大（约40k），并且我注意到在它执行操作时页面加载时间有相当大的延迟。

如果你只需要用几行额外的 CSS 代码就能解决几个问题，那就不值得这么做。

Aditia.numberOnE

# 2010年1月21日

我在 Internet Explorer 6 中使用 png 文件时遇到问题，“如何去除背景”

Arpit

评论永久链接# 2010年1月22日

你好

你需要在你的 `` 标签中去除 png 的背景，所以应用 pngfix.js 并在背景类中使用 filter 背景 css。

请查看此示例
http://jquery.andreaseberhard.de/pngFix/
r_jake

评论永久链接# 2010年1月24日

我发现 DD_BelatedPNG 是一个不错的解决方案

http://dillerdesign.com/experiment/DD_belatedPNG/

因为它通过使用 VML 而不是 MS 过滤器来解决了一些问题。

路易斯

# 2010年1月22日

克里斯，除非我遗漏了什么，否则你似乎犯了一个错误。你将“* html (选择器)”列为“仅限 IE7”，但它应该是“仅限 IE6”。

对于“仅限 IE7”，其他人指出了“first-child+html”技巧，该技巧有效，但显然你也可以使用“*+html (选择器)”。这似乎也只针对 IE7，但我从未在实际示例中使用过它，只在测试中使用过。

塔哈

# 2010年1月25日

我曾经尝试过这些代码，但它使我的工作量翻倍了。然后我尝试了 CSS 重置，并能够为每个浏览器创建一个 CSS 文件。我认为，如果我们使用 CSS 重置并了解 IE6 中关于浮动的某些错误，我们可以轻松地创建全局 CSS。

哈卡·洛普昌

# 2010年1月27日

非常好的文章。我也厌倦了 IE6。

亚历克斯

# 2010年1月28日

谢谢！

艾丽斯

# 2010年1月29日

关于技巧的一个补充

主体
{
背景：白色；/* 所有浏览器 */
*背景：黑色；/* 仅在 ie7 上显示黑色 */
_背景：蓝色；/* 仅在 ie 6 上显示蓝色 */
}

因此不需要 * html …… 简单多了，是吗？

当然，请确保你首先放置适用于所有浏览器的那个，这样它就不会覆盖其他浏览器。

好奇：我怎么会发现这一点？偶然的：经过这么多年的编码，我偶然在命令前加了一个下划线，并注意到它只在 ie6 上有效。我在 Bravo 电视台的迈克尔那里了解到 ie 7 的 *。

古德温

# 2010年1月30日

你知道微软是故意这么做的。现在比尔离开了，也许他们可以把事情做好。还要用密码保护注册表微软！克里斯，你的网站做得很好。

奥兹古尔

# 2010年1月31日

大家好，

我需要一个我的网站 css 的解决方案（我一直卡住了 :(

我使用 jQuery toggle，并在点击“Kisa Yollar”（在页面右上方，表示快捷方式）时切换一个 div，在 Firefox 或 Chrome 中，它运行良好，但在 IE 中，div 向右移动更多（超出页面）

这是一个示例页面
http://www.ihaletakipsitesi.com/ihale_tarihi_yaklasanlar_konuk.asp

如果您能帮我解决这个问题，我将不胜感激，非常感谢

一切顺利

奥兹古尔

我爱你

# 2010年2月2日

**我爱你！**Firefox 比 IE 好得多。

惠普

# 2010年2月5日

大家好，
如果有人想知道是否有简单的方法来欺骗 WordPress 在使用 IE6 查看站点时使用另一个 css，可以分享一下。因此，你可以为 IE7 和其他浏览器制作一个现代主题，但也可以使其在 IE6 及更低版本中工作。
使用样式表过滤器的操作简要说明在这里

巴巴祖姆布尔

# 2010年2月11日

我在条件样式表方面遇到了问题。你可以在 http://www.parkic.byethost7.com/ 上看到，我制作了两个样式表。一个用于 lt IE 7，另一个用于 IE7、IE8 和其他浏览器。关键是，我的语句实际上不起作用，这让我非常头疼。有什么解决方案吗？

Regan222

# 2010年2月13日

为 IE 7、IE 8、IE 6 创建样式表，然后为其他浏览器再创建一个样式表，真的值得吗？我使用一个仅限 IE 的样式表和另一个用于其他浏览器的样式表。我确保在 Firefox 和 Safari 中一切正常，然后在 IE 专用样式表中重新定位所有内容。难道这样还不够吗？

弗雷德

# 2010年2月17日

今天 IE6 的使用率下降到了 10.2%，一旦它降到个位数，我就会停止支持。它的大部分怪癖我都能处理，但它在使用 png 背景时完全崩溃的事实确实损害了我的设计。到底是谁在使用 IE6？

GPS

# 2010年2月17日

哇，我从未想过这可能实现。非常感谢

bestofca

# 2010年2月18日

我有一个网站在 IE 8 和 Firefox 中遇到了问题。它不会像 Google Chrome 那样渲染下拉菜单。我尝试将“if lte IE 6”更改为“if lte IE 8”，但仍然不起作用。如果您有任何想法，请帮忙

这是网站：bestofcampuscrimelog.com

Adam

# 2010年2月25日

嘿，大家，有人能帮我解决这个问题吗？几天来，我一直试图解决 IE6 中的这个浮动/边距问题，我尝试了 display:inline; 并研究了所有可能性，但没有成功。

请查看，你可以看到 IE6 中的问题出现在标题和主要内容中。如何解决这个问题。

这是链接
omved.boldwerks.com

非常感谢，这太疯狂了，

-亚当

阿代尔

# 2010年3月2日

很棒的文章！这是我第一次尝试为IE创建特定的CSS文件。我使用了上面提供的代码

它在我的首页上运行良好，但在网站的其他页面上似乎不起作用？我在我的博客上添加了一些更多细节 http://bit.ly/9q6xdF

感谢您的建议，

谢谢

3D Data Labs Guy

# 2010年3月9日

嗨，Chris，不错的文章。非常有信息量。
以下代码可以正确识别Internet Explorer 5。

<!–[if IE 5.0000]>–>
Internet Explorer 5.0！

IE 5（随Windows 2000一起发布）的版本向量等于5.0002。请注意：[if lte IE 5.0000]在IE 5的发布版本中评估时返回false。
顺便说一下，表达式的值被称为版本向量。
谢谢！

3D Data Labs Guy

# 2010年3月9日

尝试在这里发送代码..

echo”"; echo"\n”;

3D Data Labs Guy

# 2010年3月9日

好的。这应该可以工作:) 对不起，上面那个。

<!--[if IE 5.0000]>
<p>Internet Explorer 5.0! </p>
<![endif]-->

有些人对IE 5.5进行了一些奇怪的操作

<!--[if IE 5.5]> is not interpreted
<!--[if IE 5.500]> is not interpreted
<!--[if IE 5.5000]> is interpreted

也许IE是对的！我认为在定位IE时需要更具体。可以尝试以下方法

<!--[if (gte IE 5.5)&(lt IE 7)]>
<p>You are using IE 5.5 or IE 6 </p><![endif]-->

3D Data Labs Guy

# 2010年3月9日

在下面的示例中，只指定了主版本号；因此，代码对Internet Explorer 5和Internet Explorer 5.5都评估为true。

希望对您有所帮助。
谢谢！

Web Guru

# 2010年3月16日

非常感谢您提供这个很棒的IE技巧。它花了一些时间，但慢慢地我开始在IE上做得不错了。

;)

Emily

# 2013年10月19日

嗨
所以，我创建了一个样式表，当我的网站通过Internet Explorer访问时修复我的css。
但是它似乎不起作用（我知道样式表已连接，因为我可以更改正文字体，但我似乎无法将我的菜单按钮在页眉顶部对齐）。我甚至尝试从我的原始样式表（在Chrome和Mozilla中都能正常工作）复制粘贴我的css，并将其放在IE样式表中，但没有效果。

目前，我的IE样式表中包含这些内容，我是否只是犯了一个愚蠢的错误（这对我还很陌生）

nav ul a{

display: inline-block;
text decoration: none;
width:100%;
text-align: center;
}

nav ul {

display: inline-block;
text decoration: none;

}

.menu ul al{
display: inline-block;
text decoration: none;
}

我正在开发的网站是emily-jayne.net

Martin

# 2013年12月12日

那么，IE11呢？有什么想法吗？

# 2013年12月13日

谢谢。这是一个非常有用的资源。
不过，有一点意见。正如您所说，IE 10及更高版本不支持条件注释，另一个问题是它们将执行其中的样式。这意味着，例如，如果您为仅IE8添加条件注释，IE8、IE10和IE11都将执行此注释……这真是个噩梦。

Chris Coyier

评论永久链接# 2013年12月13日

我不这么认为。它们应该回退到HTML注释并被10/11忽略。

Bhadresh Shiroya

# 2014年1月2日

谢谢。这是一个非常有用的资源。
我的问题
每个浏览器使用不同的CSS？
例如Safari、Chrome、Mozilla、IE

例如
<!–[if gte IE 7]>

<![endif]–

以及使用Mozilla

<!–[if gte MO 7]>

<![endif]–

有什么技巧吗？

Chris Coyier

评论永久链接# 2014年1月2日

恐怕条件注释仅适用于Internet Explorer。可能可以通过“用户代理嗅探”来检测其他特定浏览器，但这可不是什么好消息： https://css-tricks.org.cn/browser-detection-is-bad/

Bhadresh Shiroya

# 2014年1月3日

**现在我找到了每个浏览器处理浏览器特定css的解决方案**
例如

var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
    // At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode;   // At least IE6

var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox';
output += 'isChrome: ' + isChrome;
output += 'isSafari: ' + isSafari;
output += 'isOpera: ' + isOpera;
output += 'isIE: ' + isIE;
document.body.innerHTML = output;

Bhadresh Shiroya

# 2014年1月3日

document.write(‘<‘+’link rel=”stylesheet” href=”/weddix.css”/>’);
if(isSafari){
document.write(‘<‘+’link rel=”stylesheet” href=”/weddix_safari.css”/>’);
}else{
document.write(‘<‘+’link rel=”stylesheet” href=”/weddix_browser_default.css”/>’);
}

<!--[if IE]>
    <link rel="stylesheet" href="<%=kkEng.getStyleBase()%>/weddix.css" type="text/css" media="screen">
    <link rel="stylesheet" href="<%=kkEng.getStyleBase()%>/weddix_browser_default" type="text/css" media="screen">
<![endif]-->

Himanshu Goel

# 2014年3月8日

首先，我对样式还不太了解，所以我的猜测可能是错的……

先生，您不认为添加过多的额外CSS表会增加更多http请求，从而增加页面加载时间吗？我很有兴趣了解是否有一种方法可以在单个样式表中进行这些条件调整……

另外，我很有兴趣了解您的响应式菜单是否仅基于css，或者是否也需要jquery或js……

Matt Litherland

评论永久链接# 2014年3月17日

嗨，Himanshu，您可以使用<!--[if IE]>语句围绕您的样式表标签来定位IE。

回答您的第一个问题，Chris在他的文章结尾处总结道；

我们不应该需要它们。它们违背了网络标准的精神。

但是这篇文章非常旧，应该仅用作指南。例如，placeholder、box-shadow等HTML5属性在旧版本的IE（8及以下版本）中不受支持，因此条件样式表可以帮助确保为没有获得现代浏览器优势的IE用户提供更好的用户体验。当然，您也可以使用条件语句显示升级您的浏览器消息。

Musa Haidari

# 2014年4月9日

如果我们想对IE9及以下版本使用样式怎么办？我想在IE9及以下版本中使用纯色而不是渐变。

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。