设计网页在 IE6 和 IE8 浏览器中看起来都很好答案

【问题标题】：designing web pages to look good in both IE6 and IE8 browsers设计网页在 IE6 和 IE8 浏览器中看起来都很好
【发布时间】：2012-05-20 23:28:07
【问题描述】：

在 ASP.NET 应用程序中，如何设计页面使其在 IE6 和 IE8 浏览器中都能正常显示？如果有任何适用于两种浏览器的通用指南要遵循，我想尽量减少我需要做的 CSS 工作。我可能仍然需要在这里和那里进行调整，但我想减少大部分工作。请让我知道是否有任何此类指导方针。提前致谢。

【问题讨论】：

您可能需要考虑发布一两个更具体问题的示例以获得更好的帮助。
开始在 IE8 中进行开发，或者更好的是，在 Chrome、Safari、Firefox 等符合标准的浏览器中进行开发。从那里开始，用它需要的黑客和其他愚蠢的废话来解决 IE6。有趣的是，你也可以学习为 IE6 编写 CSS 代码（有一些例外）。上周，我开始在 IE6 中测试现有应用程序，发现我只需要 2 行代码即可修复。熟悉这些怪癖:)
@Marko：IE8 究竟是如何不符合标准的？诚然，它是我在开发网站时不会使用的浏览器（仅仅是因为缺乏有用的工具），但说它不符合标准就太过分了。
哈哈，我知道有人会因为 @BalusC 的事来打我。但是你在 IE8 中运行过 Acid3 测试吗？ acid3.acidtests.org
@Marko：IE8 的目标是兼容 CSS 2.1，而且确实如此。 Acid3 在许多其他浏览器中也失败了。

标签： asp.net css

【解决方案1】：

我一直在编写一个最近的项目并使用来自http://code.google.com/p/ie7-js/ 的 ie7.js 脚本。它在将 IE 6 修复到合理水平方面效果惊人。然后使用这个块来声明你的身体。（这部分是从 html5boilerplate 中提取的）。

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <body class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <body class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <body class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->

您可以像这样使用相应的 id 来修饰任何杂散的 css...

#ie6 .element{
    //special stuff for ie6
}

ie7.js 脚本应该会为您节省不少时间。

【讨论】：

还有另一个答案说添加这个脚本可能会导致性能问题，所以我会尝试这个作为最后的手段。感谢您的回复。
我不会说谎，这会导致您的页面在加载时性能受到影响，并且会出现明显的延迟。但是对于我的项目来说，使用这个脚本是一个可以接受的解决方案，并且大大缩短了我的开发时间。的技巧应该不会导致任何性能问题。

【解决方案2】：

如果您将以下行添加到您的部分，它将强制使用兼容模式并有助于最大限度地减少您需要编写的 CSS 数量：

<meta http-equiv="X-UA-Compatible" content="IE=100" />

但是，如果不编写自定义 CSS 规则，您可能无法做到完美。

【讨论】：

【解决方案3】：

首先要确保页面的基本布局可以跨浏览器工作。这可能是相当的诡计，但好消息是其他人已经为您完成了繁重的工作。只需在谷歌上搜索“一栏”、“三栏”、“圣杯”或您想要的任何布局，您就会发现大量文章描述了如何在您想要的任何浏览器中实现它。

从那里开始，我的建议是为 IE8 编写代码并在需要时为 IE6 添加 hack。由于在 IE8 中工作的 CSS通常也适用于 Chrome、Firefox 和其他体面的浏览器，因此这应该将黑客攻击降至最低。

不要试图让您的网站像素在所有浏览器中都完美无缺，这只会让您发疯。让您的网站在旧版浏览器上“优雅降级”。 IE6 用户不会关心网站是否没有圆角或渐变。

在旧版浏览器中使用 javascript 模拟现代 CSS 功能也是一个好主意。但我不推荐使用 ieX.js 脚本。这些脚本需要太多 CPU 才能运行，并且如果您的 HTML 很重，可能会使您的网站无响应。

【讨论】：

我正在针对 IE8 进行开发，然后在 IE6 中对其进行检查，但我发现了一些差异，我想基于高度和宽度百分比而不是基于像素可能会起到一些作用，但我不确定。感谢您的回复。