37

我知道关于这个话题可能还有其他问题。我想每个 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 也使用它。

4

20 回答 20

57

您是否指定了有效的文档类型?您可以通过将 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-layoutshttp://960.gs/用于液体或固定布局,分别。

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

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


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

于 2009-05-29T19:28:18.867 回答
25

有条件的评论。

<!--[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,然后根据需要覆盖样式。

于 2009-05-29T19:39:30.407 回答
13

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

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

于 2009-05-29T19:13:01.583 回答
11

浏览器重置以启动。尽可能平衡游戏环境并取消浏览器默认设置。从头开始构建您的 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-透明度问题/)。

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

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

在可用的情况下使用“开发人员工具栏”(IE、Firefox)。

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

玩得开心!

于 2009-05-29T19:31:48.830 回答
7

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

至于修复,我通常使用条件注释。几个原因:

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

关于条件注释的一句话:永远不要使用开放式匹配。也就是说,永远不要做类似的事情:

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

原因与 hacks 相同:使其面向未来。如果下一个版本的 IE 修复了这个 bug,而您不再需要修复了怎么办?或者更糟糕的是,现在的“修复”实际上会在新的 IE 版本中弄乱你的布局?通常最好假设下一个版本的 IE 已经修复了您正在解决的错误。当 IE 8 出现时,我已经写过一些关于它的内容。

于 2009-05-29T19:40:12.370 回答
7

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

  1. 使用 reset.css - Yahoo! YUI 重置Eric Meyer 的重置 CSS
  2. 小心浮动,清除 - 它们通常会引起很多诅咒。
  3. 请注意 IE 中的 hasLayout 错误,通常添加 zoom: 1 或 height 属性有助于解决此问题。阅读有布局
  4. 让布局在 Firefox、Safari、Chrome 等中工作,同时保持 IE 大约 80% 的路径。
  5. 如果需要,使用条件注释实现 IE6.css 样式和 IE7.css 样式。
  6. 啤酒、白酒或其他成人饮料。
于 2009-05-29T19:46:42.340 回答
5

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

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

<!--[if ie6]><link rel="stylesheet" type="text/css" media="screen" href="ie6_style.css" /><![endif]--> 
于 2009-05-29T19:35:59.163 回答
4

由于IE 获得了大约 65% 的流量,我认为您不能将其视为事后的想法。

于 2009-05-29T19:34:49.697 回答
3

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

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

于 2009-05-29T19:13:16.903 回答
3

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

你可以有 :

.someClass {
  margin-left:1px
}

.ie6.someclass {
  margin-left:2px
}
于 2009-05-29T19:16:16.007 回答
3
<script>
  if (internetExplorer) {
    window.location = "http://getfirefox.com";
 }
 </script>
于 2009-05-29T19:17:36.363 回答
3

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

于 2009-05-29T19:30:45.807 回答
3

我删除它

于 2009-05-29T19:35:04.470 回答
3

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

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

于 2009-05-29T19:43:03.800 回答
3

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

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

也就是说,对于现有的应用程序,我首先要确保我的 HTML 是有效的(有多种验证服务可供您使用)然后,根据布局,我逐节尝试让布局正确,使用评论来“隐藏”您没有积极处理的部分。

于 2009-05-29T19:48:55.910 回答
1

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

于 2009-05-29T19:41:19.793 回答
1

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

它可能不是完美的解决方案,但对于我的需求来说已经绰绰有余了。

于 2009-05-29T19:49:09.420 回答
1

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

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

我不是专家,但希望我的评论对您有所帮助。

Cheery-O

于 2009-05-29T20:27:27.937 回答
1

我确保我的网站在 ie9 中本地和完美地运行,并在 ie8 中运行(可能缺少功能)。我提示所有使用旧版本的人获取镀铬框架。我从不把时间浪费在 ie7 和更老版本上,因为使用 6 岁的浏览器是可悲的,不应该被鼓励。

于 2012-02-08T06:36:55.850 回答
0

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

我不会花太多精力让它与 IE6 兼容,而只是接受网站在各种浏览器中看起来可能不同的事实。

于 2009-05-30T10:23:25.440 回答