IE8 CSS Hack - 最好的方法？答案

【问题标题】：IE8 CSS Hack - best method?IE8 CSS Hack - 最好的方法？
【发布时间】：2011-08-03 21:32:16
【问题描述】：

谁能推荐通过 CSS 破解 IE8 样式的最佳方法，我最近将 IE8 渲染为 IE7 以方便使用 - 但想知道添加 IE8 hack 是否最好？

【问题讨论】：

最好的方法是完全不使用黑客。
如果您的网站在 IE7 中看起来比 IE8 好得多，那么您就有严重的问题。
有些东西 IE 的渲染方式与其他浏览器不同，黑客也可以用于此。如果您需要每个版本的完整 CSS 样式表，那么您的代码就有问题。要直接破解 IE8 及以下 CSS 实体中的单行，您可以使用 {property: value\9;}
@My Head Hurts 你的 CSS 很快就会被这些 hack 搞砸。我并不是说每个 IE 版本都应该有一个单独的表格，我只是概述了可能性。我通常有一个用于filter 废话放在那里，如果我必须支持它，还有一个用于IE6。正如我在回答中所说的那样，这并不是重复所有内容的整张纸。
@bazmegakapa - 我发现如果您正确编写代码，那么 IE7/8 上的唯一修复（我认为任何使用 IE6 的人都应该超出范围）往往与像素（高度、宽度, padding...) - 这可以通过简单的 CSS hack 来修复，并且不会变得混乱，因为它包含在同一个 CSS 元素中。我同意你为 IE9 添加新的 CSS 样式表，因为它可以容纳新功能 - 但这个问题是 IE7 和 IE8 之间的问题。 -> 另外，我是为你对严重问题的评论 +1 的人

标签： css internet-explorer-8 ie8-compatibility-mode css-hack

【解决方案1】：

你应该颠倒你的方法。首先，您的网站应该在现代浏览器（如 Firefox、Chrome、Opera、IE 9）中看起来不错，然后您就可以开始担心其他浏览器了。

正如其他人所建议的，有条件的 cmets 可以成为你的朋友。

首先，您应该开发自己的 CSS，使其在现代浏览器中看起来不错。然后检查IE8，看看你遇到了什么问题。如果需要，请包含特定于 IE 的样式表。之后，您可以检查 IE7，如果您支持 IE6，则可以添加进一步的修复。

一个例子：

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

在这种情况下，您包括normal.css，它适用于现代浏览器。你发现了一些奇怪的 IE8 问题，所以在ie8.css 你解决了这些问题。您不必在其中包含所有选择器，只需包含需要修复的选择器（对于 IE 8 及更低版本，这些值将被覆盖）。之后，如果IE7中还有一些奇怪的地方，你可以添加你的ie7.css并修复它们，等等。

请参考其他人给您的链接以获取有关条件 cmets 使用的更多信息。

最后： making IE8 render as IE7 for ease 绝不是一个好主意，应该避免。 IE7 是遥远的过去（在 IT 界，IE8 也应该是遥远的过去......），为现在和未来而发展，然后你可以关心仍然坚持旧技术的人（基于您的受众和业务计划）。

【讨论】：

+1，好建议。我可能还提到making IE8 render as IE7 for ease 是个坏主意。
@thirtydot 谢谢，我会添加它。你怎么强调都不够:)。

【解决方案2】：

使用conditional comments。

【讨论】：

【解决方案3】：

作为发布的其他答案，您可以使用条件注释，但是当用户使用 IE8 时会添加一个 HTTP 请求。您可以在 css 文件中使用 \0 hack

img{
width:200px;//other broswers
width:100px\0;//only IE8
}

【讨论】：

我个人建议不要使用任何类型的hacks。条件 cmets 是一种解决 IE 问题的干净方法。在大多数网站上，当您开始优化时，您不必担心再请求一个 IE CSS :)。
效果很好。我在其他人控制的 Oracle 内容管理系统上，我无法添加条件语句，所以这个 hack 就足够了。

【解决方案4】：

你能解释一下你想要什么吗？

一般来说，IE8 与标准兼容，因此只需确保您的 HTML 文档处于标准模式，并为 IE8 提供与任何其他浏览器相同的样式表。

如果 IE 出现问题，那么最好的解决方案是使用 Conditional Comments 给 IE 一个单独的样式表。

【讨论】：

【解决方案5】：

使用ie7-js Javascript 库，它可以使旧版本的IE 在处理HTML 和CSS 时表现得更像正常的浏览器。然后，正如其他人建议的那样，以符合标准的方式编写代码，与最新版本的 Chrome、Firefox、Opera 等兼容。

【讨论】：

【解决方案6】：

我一直在为 IE10 及以下 CSS 样式寻找一个不错的选择（但它也仅适用于 IE8），我不想要额外的样式表以提高可读性，我想出了这个想法：

<!--[if lt IE 10]><div class="column IE10-fix"><![endif]-->
<!--[if !lt IE 10]><!--><div class="column"><!--<![endif]-->

我用一个额外的类声明我的 div 或任何你想要的东西，这允许我在同一个样式表中以一种非常易读的方式拥有额外的 CSS。

它是 W3C 有效的，而不是奇怪的 CSS hack。

【讨论】：

【解决方案7】：

仅限ie8：最好的方法是

body{background:#f00\0/;}

\0/ 是 Ie8 CSS Hack

【讨论】：

真的吗？但我没有看到。你确定是IE9？
也许是另一种方式------------code /* IE6 IE7 */ @media all\9 { body { background: green; } } /* IE8 */ @media \0screen { body { color: blue; } } /*IE9 IE10 */ @media screen and (min-width:0\0) { body { background: yellow; } } /* IE10 IE11 */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .selector { property: value; } }