Question

我最近为客户设计了一个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分开。

感谢您的时间。

Answer 1

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中存在问题的常用样式。

Answer 2

我觉得你遇到了一个盒子模型问题，因为你是在Quirks模式下渲染的。 IE7 +和所有其他浏览器使用 W3C盒型号，而IE6在怪癖模式下使用 IE Box型号。

IE框模型（称为传统的盒子模型），包括元素宽度/高度的填充和边框。

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

W3C盒型号（标准盒型号），从元素的宽度/高度中排除了填充和边框。

在W3C盒子模型下，宽度为100px，每边2px填充，3px边框和每边7px边距的盒子的可见宽度为124px。

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

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

要在IE中触发严格模式，您必须指定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 Transitional：

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

您的doctype必须是首页出现在您的页面上。它甚至在<html>标记之前，就在它自己的行上。（添加<?xml> prolog会导致IE返回Quirks模式，如果有的话，请将其删除。

有关Quirks / Strict模式的更多信息：

CSS - Quirks mode and strict mode

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

Answer 3

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

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

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

进行链接

祝你好运：）

Answer 4

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

解决IE 6问题 - 我最喜欢的选择是安装一个IE模拟器，让你运行多个版本的Internet explorere。 This one非常好，尽管还有其他人。另一种常见的方法是创建一个运行IE 6或双启动的虚拟机（两者都很费时而且很痛苦，但是当然可行）。我尽可能使用模拟器。

Answer 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中渲染你的标记，而不必安装它们。

Answer 6

如果您拥有Win2K许可证，请抓取VirtualBox，使用IE6在其上安装Win2K，然后从那里测试该页面。这就是我在没有实际安装IE6的情况下完成大部分测试的方法。

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

Answer 7

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

Answer 8

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

CSS浏览器兼容性问题

8 个答案: