IE8 CSS Hack - 最佳方法？

Question

IE8 CSS Hack - 最佳方法？

cssinternet-explorer-8ie8-compatibility-mode

8

有人能推荐一种最佳方法通过CSS来修改IE8的样式吗？我最近把IE8渲染成IE7以提高易用性，但不知道是否应该添加IE8特定的hack。

- Dancer

5

最好的方法是根本不使用黑客技巧。 - BoltClock

2

如果你的网站在IE7中比在IE8中看起来好得多，那么你就有严重的问题。 - kapa

有些东西IE浏览器无法像其他浏览器一样呈现，因此可以使用hack来解决。如果您需要为每个版本编写整个CSS样式表，则代码存在问题。要直接针对IE8及以下版本中的CSS实体中的单行进行hack，可以使用{property: value\9;}。 - My Head Hurts

@我头痛了。你的CSS将很快因这些黑客而变得混乱。我不是说你应该为每个IE版本都有一个单独的样式表，我只是概述了可能性。通常我会有一个针对<IE9的样式表，其中我放置所有那些“filter”垃圾，并且如果必须支持IE6，则会有一个针对IE6的样式表。正如我在我的答案中所说，这不是一个整个样式表，其中重复了所有内容。 - kapa

@bazmegakapa - 我发现，如果你正确编写代码，那么在IE7/8上的唯一修复（在我看来，任何使用IE6的人都应该超出范围）往往涉及像素（高度、宽度、填充等...）- 可以通过简单的CSS hack进行修复，并且不会变得混乱，因为它包含在同一个CSS元素中。我同意您为IE9添加新的CSS样式表，因为这可以适应新功能-但是这个问题是IE7和IE8之间的问题。->此外，我是+1您关于严重问题的评论的人。 - My Head Hurts

@My Head Hurts 我没有说要为IE9添加一个表格，我是为<IE9，也就是旧版IE添加的。我个人不会在我的主CSS中使用hack，但让我们把这留给个人喜好吧 :）。当我继承了一个充满CSS hack的项目时，我并不开心：）。 - kapa

7个回答

5

正如其他答案所述，您可以使用条件注释（Conditional Comments），但这会在用户使用IE8时增加一个HTTP请求。您可以在CSS文件中使用\0 hack。

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

- eddie yang

1

个人建议不要使用任何类型的“hack”。条件注释是解决IE问题的一种干净的方式。在大多数网站上，当您开始进行优化时，不必担心获取IE CSS的请求次数增加 :)。 - kapa

工作得很好。我正在使用由其他人控制的 Oracle 内容管理系统，无法添加条件语句，因此这个 hack 将不得不满足。 - mbokil

5

Use conditional comments.

- Daniel A. White

2

您能再详细解释一下您希望的内容吗？

通常，IE8与标准相当兼容，所以请确保您的HTML文档处于标准模式，并为IE8提供与其他浏览器相同的样式表。

如果IE出现问题，则最好的解决方案是使用条件注释为IE提供单独的样式表。

- RoToRa

0

我正在寻找适用于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。

- Sunkhern

0

使用ie7-js JavaScript库，它可以通过一些技巧使旧版IE更像一个正常的浏览器来处理HTML和CSS。然后，就像其他人建议的那样，以符合标准的方式编写代码，以便与最新版本的Chrome、Firefox、Opera等浏览器兼容。

- entropo

-1

仅适用于ie8：最好的方法是

body{background:#f00\0/;}

\0/ 是Ie8 CSS Hack

- reyhappen

真的吗？但我没有看到。你确定是IE9吗？ - reyhappen

或许还有另一种方式------------

代码 /* 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; } }

- reyhappen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kapa · Accepted Answer

你应该反转你的方法。首先确保你的网站在现代浏览器（如Firefox，Chrome，Opera，IE 9）中显示良好，然后再开始担心其他浏览器。

正如其他人建议的那样，条件注释可能会对你有帮助。

首先，你应该开发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并进行修复等等。

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

最后: 使IE8以IE7的方式呈现永远不是一个好主意，应该避免使用。IE7已经过去了（在IT世界中，IE8也应该属于过去时代...），要为现在和未来而开发，然后再考虑那些仍被困在旧技术中的人（根据您的受众和业务计划来确定）。