你如何处理 Internet Explorer？

Posted 2023-03-06

【中文标题】你如何处理 Internet Explorer？

【英文标题】：How do you deal with 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 模式意味着您正在使用两种不同的盒子模型。

【参考方案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 年的浏览器太可悲了，不应该被鼓励。