CSS 浏览器兼容性问题答案

【问题标题】：CSS Browser Compatibility issuesCSS 浏览器兼容性问题
【发布时间】：2010-11-17 13:47:43
【问题描述】：

我最近为客户设计了一个 Web 应用程序。我将 CSS 用于应用程序的布局。我在 IE7、Mozilla 3.0.1、Google Chrome 2.0.xxx、Safari 3.1 和 Opera 9.51 上测试了布局。

它们都正确显示，没有问题。交付应用程序后，我的客户注意到它与 IE6 存在兼容性问题。网站显示不正确。

我该如何解决这个问题？我的系统上没有 IE6 甚至无法尝试修复它。每次我尝试将浏览器降级到 IE6 时，IE 都会停止工作。有没有办法可以得到一个可以在线模拟IE6的环境。

其次，使用css框架来解决兼容性问题，即使我想使用css框架，除了蓝图css，哪个更好。

感谢您的宝贵时间。

【问题讨论】：

这就是为什么我们在为人们工作时有合同 - 我希望为了您的利益，客户为 IE6 兼容性工作支付了额外的费用......

标签： html css frameworks

【解决方案1】：

我感觉您遇到了盒子模型问题，因为您在 Quirks 模式下进行渲染。 IE7+ 和所有其他浏览器使用 W3C 盒子模型，而 IE6 在 quirks 模式下使用 IE 盒子模型。

IE 框模型（称为传统框模型），在元素的宽度/高度中包含内边距和边框。

在 IE 盒子模型下，宽度为 100px、每边 2px 内边距、3px 边框和每边 7px 边距的盒子的可见宽度为 114px。

W3C 盒子模型（这是标准盒子模型），从元素的宽度/高度中排除了内边距和边框。

在 W3C 盒子模型下，宽度为 100 像素、每边有 2 像素内边距、3 像素边框和每边 7 像素边距的盒子的可见宽度为 124 像素。

_{（来源：456bereastreet.com）}

为了让 IE 使用 W3C 盒子模型（这是所有其他浏览器都使用的），您的页面需要以 Strict 模式呈现。默认情况下，IE 以 Quirks 模式呈现。

为了在 IE 中触发 Strict 模式，您必须指定一个 doctype。您可以使用以下任何文档类型：

HTML4 严格：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd" >

XHTML 1.0 严格：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 过渡：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

您的文档类型必须是出现在您页面上的第一件事。它甚至在<html> 标签之前，在它自己的行上。（添加<?xml> prolog 会导致 IE 回到 Quirks 模式，如果有的话，请将其删除。

在此处了解有关 Quirks/Strict 模式的更多信息：

CSS - Quirks mode and strict mode

虽然添加 doctype 来切换标准模式可能无法解决您的所有问题，但您至少会朝着正确的方向迈出一大步。

【讨论】：

即使在标准模式下，IE6 的布局/CSS/Javascript 能力，呃，“有限”，但这是 IE6 移植的第一步。

【解决方案2】：

IE6 在处理 CSS 的方式上是一场众所周知的灾难。最好的办法是使用虚拟机或安装了 IE6 的旧系统并使用它进行测试。但是，有一些不错的工具可以在很大程度上模拟 IE6。我最喜欢的是IETester。 browsershots.org 有一个在线工具也不错，但我发现它有时并不一致。

您最好的方法是创建一个仅适用于 IE6 的单独样式表，并让您的 CSS 的其余部分保持工作状态。您可以在 HTML <head> 中使用以下内容来加载仅 IE6 的样式表：

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

加载后，您可以开始覆盖在 IE6 中出现问题的常用样式。

【讨论】：

Zombat 完美无缺。使用带有 IE6 的虚拟化 PC，并使用条件 cmets 更正仅 IE6 - 其他所有人都会将其视为正常评论并忽略它。我发现模拟 ie6 的程序做得不够好，无法真正确保你做对了。
IETester 是我使用的。来这里是为了建议这件事。与任何模拟器一样，它可能无法以 100% 的准确度描绘某些内容，但我还没有遇到过问题。

【解决方案3】：

首先，从http://www.microsoft.com/Downloads/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&displaylang=en这里下载virtual pc和IE兼容性测试VHD对你很有帮助，我也使用过zombat提到的IEtester，但更喜欢VPC图像。

然后，您可以针对不同风格的 IE 测试您的应用。

为了让 IE 6 正常工作，我经常使用单独的 CSS 表，并使用条件 cmets http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx 链接它

祝你好运:)

【讨论】：

【解决方案4】：

IE 6 在其 CSS 框模型中有许多错误，导致正确编码的网站在该浏览器下崩溃。可以使用 box model hack 和其他解决方法来解决这些问题，所以它是获取 IE 6 的问题。Here is a list of common fixes for IE 6 box model problems

解决 IE 6 问题 - 我最喜欢的选择是安装一个 IE 模拟器，让您可以运行多个版本的 Internet Explorer。 This one 还不错，虽然还有其他的。另一种常见的方法是创建一个运行 IE 6 或双启动的虚拟机（两者都可能既耗时又痛苦，但绝对可行）。我更喜欢尽可能使用模拟器。

【讨论】：

【解决方案5】：

创建一个专门用于修复 IE6 问题的样式表，并使用条件语句（只有 IE 支持）调用它。以下是您应该在文档开头包含的内容的示例：

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

您可能还需要考虑“重置”您的 CSS，这有助于在公平竞争环境中启动浏览器（即消除 IE 中不一致的边距和填充）。我使用的可以找到here 和 Yahoo!提供decent reset stylesheet 作为 YUI 3 的一部分。

至于能否在 IE6 中调试自己的标记和样式，我建议以下两个选项：Xenocode's Browser Sandbox 虚拟化浏览器（IE6、IE7、IE8、FF2、FF3、Chrome、Opera 9、Safari 3、 Safari 4) 无需安装实际应用程序即可在您的 PC 上安装，IETester，虽然有很多错误，但让您无需安装即可在 IE6、IE7 和 IE8 中呈现您的标记。

【讨论】：

【解决方案6】：

如果您有 Win2K 许可证，请获取 VirtualBox，使用 IE6 在其上安装 Win2K，然后从那里测试页面。这就是我无需实际安装 IE6 即可完成大部分测试的方式。

如果这不是您为特定客户做的事情，而是整个网络，我建议使用来自 IE6 No More! 的代码

【讨论】：

【解决方案7】：

安装IETeaster 以在不同版本的IE 浏览器中进行测试。在这里你可以找出问题出在哪里

【讨论】：

【解决方案8】：

我猜，在 W3C 盒子模型下，一个宽度为 100px、每边有 2px 内边距、3px 边框和每边 7px 边距的盒子的可见宽度为 114px。不是 124，因为 W3C 从元素的宽度/高度中排除了填充和边框。

【讨论】：