你如何处理 Internet Explorer？答案

【问题标题】：How do you deal with Internet Explorer?你如何处理 Internet Explorer？
【发布时间】：2010-10-29 23:35:00
【问题描述】：

我知道关于这个主题可能还有其他问题。我猜每个 web 开发者都会用 IE 来经历这个。

我的问题：

我正在开发一个完全基于 Javascript 的基于 Web 的应用程序。我是 Mac 用户。我真的很高兴在 Safari、Firefox 和 Opera 中一切正常。然后我请一位使用 Windows 的朋友使用 Internet Explorer 进行检查，但事情并不顺利。我的应用程序对 HTML 标准非常敏感。

主要问题是 CSS 布局。由于 jQuery 的可移植性，JavaScript 本身似乎可以正常工作。

我的问题：

您如何处理 Internet Explorer？我应该创建一个只在 Internet Explorer 上加载的新 CSS 吗？我应该只为 Internet Explorer 创建一个新版本的应用程序吗？您通常如何处理这个问题？该应用程序在功能设计和布局设计方面都相当大。

编辑：

使用 Nosredna 建议的 CSS 重置，已经消除了几乎一半的问题。我想这确实是一个好习惯。我注意到 SO 也使用它。

【问题讨论】：

我的一般技巧包括很多脏话。
无意冒犯，但您在开始开发应用程序时不应该考虑 IE 吗？毕竟它仍然是市场份额最大的浏览器。
我使用 Firefox 处理 IE。 =)
如果您的网站“大量使用 HTML”并且在 IE 中“一切都毁了”，那么您您的网站写错了。简单真的更好。
@randolpho，如果您忽略任何主流浏览器（尤其是 IE），真的很容易弄得一团糟。对 AJAX 很重的 RIA 需要在开发时对所有浏览器进行持续测试。让 IE 处于 quirks 模式意味着您正在使用两种不同的盒子模型。

标签： html css internet-explorer portability

【解决方案1】：

首先，我不会等到项目完成后才考虑浏览器兼容性。

大多数情况下，对于 CSS 问题，有一些方法不需要加载特定于浏览器的样式表，因此我会尽可能使用这些解决方案。例如 - 如果您的大部分问题都与框模型问题有关，则使用嵌套 div 代替填充可以帮助确保一切看起来正确，而无需针对不同浏览器使用单独的样式表和模板。

【讨论】：

【解决方案2】：

总的来说，我尽量不为 IE 制作单独的 CSS 文件。如果需要，我将使用条件格式来专门针对它。不过总的来说，您最多可能需要做一个仅 IE 的样式表才能使其工作。

请确保您使用适合您的受众的正确版本的 IE 进行测试，因为 IE 6、7 和 8 很常见。

【讨论】：

【解决方案3】：

作为最后的手段，当调整 CSS 并不能解决问题时，我喜欢使用 Rafael Lima's CSS selector 脚本。虽然它依赖于 JavaScript（我构建的大多数网站都是这样做的），但它提供了一种方便的方法来为不同的浏览器和版本调整 CSS，而无需单独的样式表。

你可以拥有：

.someClass {
  margin-left:1px
}

.ie6.someclass {
  margin-left:2px
}

【讨论】：

【解决方案4】：

<script>
  if (internetExplorer) {
    window.location = "http://getfirefox.com";
 }
 </script>

【讨论】：

太棒了！我应该把它放在我开发的所有网站上！虽然我想我现在建议使用 Chrome :-(
在建议 Chrome 之前，您还需要检查机器类型。它不适用于我们中间的 Mac 和 Linux 用户。然而……
@John Munsch...如果用户在 Mac/Linux 上运行，IE 测试不会失败吗？ ;-)

【解决方案5】：

您是否指定了有效的文档类型？您可以通过将 Internet Explorer 切换到标准模式来使其更加兼容。 http://msdn.microsoft.com/en-us/library/bb250395.aspx#cssenhancements_topic2

您是否使用浏览器重置 CSS 文件？这可以帮助将版本组合在一起。 http://meyerweb.com/eric/tools/css/reset/

注意 IE 的 CSS 错误：http://www.positioniseverything.net/explorer.html

对于布局的骨架，请考虑使用已知有效的标记，例如分别用于流动或固定布局的http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts 或http://960.gs/。

了解浏览器之间的 JavaScript 差异。 jQuery 处理其中的一些，但不是全部。 http://www.impressivewebs.com/7-javascript-differences-between-firefox-ie/

是的，IE 很痛苦。如果你想让它在 IE 中工作，你真的想每隔几天在 IE 中测试一次。你不想把痛苦留到最后——你想一次处理一个噩梦。

顺便说一句，如果您认为 IE 很痛苦，请尝试用手机查看您的页面。前几天我带着 iPhone 去 REI.com，屏幕的中间五分之一或更多被一堆呈现为文本的乱码占据。

【讨论】：

对不起，什么是浏览器重置 CSS 文件？以及您认为 IE 更符合标准的文档类型是什么？
doctype info:msdn.microsoft.com/en-us/library/…一个css重置（有很多）：meyerweb.com/eric/tools/css/reset
你很快就会得到正确答案了:) ty，只是检查是否有更多答案弹出

【解决方案6】：

使标记尽可能简单。做些小改动。测试每一个变化。

【讨论】：

【解决方案7】：

浏览器重置开始。尽可能平衡游戏环境并取消浏览器默认设置。从头开始构建您的 CSS。（见：http://meyerweb.com/eric/thoughts/2007/04/12/reset-styles/）

在开发过程中尽早并经常在所有主要浏览器上进行测试。

尽量在没有浏览器特定黑客的情况下完成。有时您需要使用一些特定于浏览器的 CSS，但它应该验证（使用 W3C 验证工具）。有时，尽管它只是一个条件（甚至可能是一些 JavaScript），例如修复 IE6 中的透明 PNG（参见：http://nettuts.com/videos/screencasts/5-easy-ways-to-tackle-ie6s-transparency-issues/）。

如果您无法在其中一台开发机器上运行 IE，请尝试http://browsershots.org。至少你可以通过这种方式得到一些反馈。

使用 debug.css 突出显示或概述 div 和其他元素。如果在开发过程中需要的话，把它扔到你的 HTML 头中。这可能是一个巨大的帮助。

在可用的情况下使用“开发者工具栏”（IE、Firefox）。

预计 IE 会很痛苦，并在 6、7 和 8 中进行测试。

玩得开心！

【讨论】：

browsershots.org 的好网页
有趣的评论...回答链接的域被吸收了？现在尝试点击它 XD 不过，4 年后可以期待什么？但是，以防万一，我仍然会更新/删除，因为我只是偶然发现这个问题并决定开始点击的另一个人。
删除的链接现已失效。谢谢 Chris Cirefice。

【解决方案8】：

对于IE getting around 65% of the traffic，我认为您不能将其视为事后的想法。

【讨论】：

问题是这么多 Web 开发人员使用 Mac 或 Linux。如果微软有适用于 Mac 和 Linux 的 IE，我认为网站在 IE 上看起来会更好。

【解决方案9】：

我删了

【讨论】：

对支持这个答案的两个人感到羞耻。
哈哈，虽然不是我写的，但你最好相信我是这么想的。
同意不应该赞成，但也不应该反对！这是幽默的人......是的......让你发笑的东西;-)
我只想指出我是回答者，我在嘲笑人们对此表示赞同。这是一项社会实验，结果超出了我的最大预期。
无知是福，不是吗？！

【解决方案10】：

我认为为 IE 编写一个特定的 css 文件是可以的。我知道这很痛苦，但由于一些定位问题，IE6 看起来与所有其他浏览器不同。

将此行用于您新创建的 css 文件：

<!--[if ie6]><link rel="stylesheet" type="text/css" media="screen" href="ie6_style.css" /><![endif]-->

【讨论】：

【解决方案11】：

Conditional comments.

<!--[if IE 6]>
  <link rel="stylesheet" href="ie6.css">
<![endif]-->
<!--[if IE 7]>
  <link rel="stylesheet" href="ie7.css">
<![endif]-->
<!--[if IE 8]>
  <link rel="stylesheet" href="ie8.css">
<![endif]-->
<!--[if !IE]-->
  <link rel="stylesheet" href="normal.css">
<!--[endif]-->

在 IE 文件中，您可以使用@import 导入normal.css，然后根据需要覆盖样式。

【讨论】：

首先简单地链接 normal.css 并在任何地方链接可能会更快，然后在其下方链接其他浏览器的条件 cmets，必要时覆盖。

【解决方案12】：

首先，阅读On Having Layout，它解释了 IE 渲染引擎如何在内部工作。 IE的渲染引擎是CSS之前的。它没有像您期望的那样正确区分内联元素和块元素。相反，在 IE 中，元素 hasLayout。或不。这是 99% 的 IE CSS 错误的来源。所以，多读几遍那篇文章。

至于修复，我通常使用条件 cmets。几个原因：

它们是面向未来的，而不是 CSS hack。如果 IE9 修复了 hack 但没有修复您使用它解决的错误怎么办？
它是有效的 (X)HTML（条件 cmets 对其他人来说只是普通 cmets）
它不需要javascript。您会惊讶于有多少人关闭了 javascript。

关于条件 cmets 的一句话：永远不要使用开放式匹配。也就是说，永远不要这样做：

<!--[if IE]> <load css> <![endif]-->
<!--[if gte IE 7]> <load css> <![endif]-->

原因与 hacks 相同：使其面向未来。如果下一个版本的 IE 修复了这个 bug，而您不再需要修复了怎么办？或者更糟糕的是，现在的“修复”实际上会在新的 IE 版本中弄乱你的布局？通常最好假设下一个版本的 IE 已经修复了您正在解决的错误。当 IE 8 出现时，我有 written a little bit 的相关信息。

【讨论】：

【解决方案13】：

我通常会尽我所能避免创建单独的 CSS 文件。有很多 CSS 和 HTML 技巧和提示可以让您在 IE6 及更高版本以及所有其他常见浏览器中工作。只是需要时间来弄清楚这一切。不幸的是，有时对于复杂的布局可能会花费很多时间，尤其是当您不进行测试时。

【讨论】：

【解决方案14】：

我认为开发一个用于 IE 的新 CSS 文件会比重新编写应用程序容易得多，但我不知道你的应用程序有多大的规模和范围，这甚至会使这样做成为一个相当大的选择。我想这可能取决于您希望支持的 IE 版本。

我们现在已经到了大多数用户应该完全从 IE6 迁移出来的地步。 IE7 仍然很麻烦，但远没有 6 那样糟糕。对于我的项目，我出售的默认设置是 IE7 与代码的兼容性，以指导 IE6 及以下用户进行升级。如果客户希望我将 IE6 兼容性整合到网站中，我通常会将报价提高 50%，因为支持浏览器是一件多么令人头疼的事情，而且必须编写多少额外的可视化代码才能使其正常工作。

【讨论】：

“应该有”...是的。在实践中，我发现至少有四分之一的 IE 流量仍然来自于老旧的 IE6。至少我们似乎终于摆脱了 IE5.5...
这就是支持的目的；)。我已经失去了一些与这个规定有关的合同，但还不足以让我考虑改变我的立场。我更愿意鼓励用户与时俱进，然后让他们继续保持旧习惯；但我发现有这种心态的人占少数。
我们都想要抛弃 IE6（如果不是所有的 IE 版本）。我喜欢你为 IE6 开发征收 50% 税的解决方案。

【解决方案15】：

以下是我尝试减少处理 IE 的痛苦的方法：

使用 reset.css - Yahoo! YUI Reset 或 Eric Meyer's Reset CSS
小心浮动和清除 - 它们通常会引起很多诅咒。
注意 IE 中的 hasLayout 错误，通常添加缩放：1 或高度属性有助于解决此问题。阅读On Having Layout。
让布局在 Firefox、Safari、Chrome 等中运行，同时保持 IE 大约 80% 的路径。
如果需要，使用条件 cmets 实现 IE6.css 样式和 IE7.css 样式。
啤酒、白酒或其他成人饮料。

【讨论】：

在 IE8 中“有布局”是否仍然有效？
不确定在带有 hasLayout 的 IE8 中还存在多少错误，但在标准模式下，它肯定仍然在 IE8 中 40-60% 的页面内容上设置了属性。

【解决方案16】：

我知道这可能属于“太少、太迟”的类别。也就是说，我将投资于 VMWare 或 Parallels，并创建一个带有 IE6 的 Windows VM。

随着您的开发，您应该在您关心的浏览器中逐步检查您的进度。

也就是说，对于现有的应用程序，我首先要确保我的 HTML 是有效的（您可以使用各种验证服务）然后，根据布局，我逐节尝试获取布局正确，使用 cmets 来“隐藏”您没有积极处理的部分。

【讨论】：

另外，微软为多种网络浏览器提供免费图片，XP 支持 IE 6，XP 支持 IE 8，XP 支持 IE 7，Vista 支持 IE 8 等等。图片在这里：microsoft.com/Downloads/… 或者只是搜索IE App Compatibility Images 在一些驱动程序finangling 后在VirtualBox 中的Ubuntu 上运行。

【解决方案17】：

我让别人为我解决问题。我使用 Yahoo 优秀的 CSS 文件，这些文件包含在他们的 YUI 库中。他们有一个文件来删除现有标签的现有格式（例如，IE 中的 H1 看起来不像 Firefox 中的 H1），他们有另一个文件可以为我提供一组默认格式，在浏览器中看起来确实相同，他们还有另一个要标准化字体大小，其中最重要的是它们的网格文件。它使我能够非常快速轻松地在页面上构建区域和子区域的分层格式，并且我知道它可以在任何主要的现代浏览器上运行（雅虎对其进行了测试以确保它确实有效）。

这可能不是完美的解决方案，但已经足够满足我的需求了。

【讨论】：

【解决方案18】：

我在我的开发中遇到了同样的问题：IE6，FFetc + LAMP + 自定义 MVC，基于 Rasmus Lerdorf 的文章，当时他建议使用 noMVC 类处理它，使用包含页眉、页脚和排序。我编写了 CSS 代码，被 FF 卡住了，不能很好地渲染它。我不得不去修改我的 CSS 知识——我发现单个 CSS 实现可以在 std.xml 中正确呈现。兼容模式（FF）和IE6。我喜欢那个。我很高兴使用单个 CSS 文件处理任何更改。我的建议：

我知道你有一台 Mac，去车库出售（报纸会告诉你它们在哪里），花 10 美元买一台旧电脑（到目前为止我已经找到了很多）。这将使您有机会尽早测试 IE6，同时您还可以获得 KVM 切换器，以便在需要时访问机器。
让我上瘾的一件事是 IE6 的设置 - 禁用所有 ActiveX 脚本 - 无论如何，在没有广告的情况下浏览网页会变得非常棒 - 测试你的应用程序是否有 ActiveX 设置，看看你的网站表现如何.这确实为我节省了我上面提到的几个小时的“痛苦”时刻。
您知道如何使用和不使用脚本测试 FF/Opera/Safari
最后 - 无论您的网站使用了多么繁重的 Javascript，请确保在不对核心功能（我相信您有很多）编写脚本的情况下正确加载。

我不是专家，但希望我的 cmets 能帮到你一点。

欢呼吧

【讨论】：

【解决方案19】：

正如 nosredna 所说，使用有效的文档类型（参见 http://www.alistapart.com/articles/doctype/）然后在 w3c 验证器 (http://validator.w3.org/) 中检查您的网站。如果它没有显示错误（或只有几个），那么 IE 应该正确呈现它。

我不会花太多精力让它与 IE6 兼容，我只是接受这样一个事实，即网站在不同的浏览器中看起来会有所不同。

【讨论】：

您仍然需要努力确保它可以在不同的浏览器中使用，并且在 IE 中无法保证正确验证标记...

【解决方案20】：

我确保我的网站在 ie9 中本地和完美地运行，并在 ie8 中运行（可能缺少功能）。我提示所有使用旧版本的人获取镀铬框架。我从不为 ie7 及更高版本浪费时间，因为使用 6 年的浏览器太可悲了，不应该被鼓励。

【讨论】：