Firefox vs IE vs Chrome vs Safari [关闭]答案

【问题标题】：Firefox vs IE vs Chrome vs Safari [closed]Firefox vs IE vs Chrome vs Safari [关闭]
【发布时间】：2010-09-27 10:10:12
【问题描述】：

目前我正在设计一个网站，我发现很难在所有浏览器上完美地显示该网站。

有什么规则、建议等可以遵循吗？

谢谢

【问题讨论】：

首先，你有它的链接吗？如果有紧急情况，我相信我们可以为您解决。其次，您使用的是什么版本的 (X)HTML，您是否将其写入标准（验证）？
dowebsitesneedtolookexactlythesameineverybrowser.com
可惜的是网站在不同的浏览器（至少 IE 和 Firefox）中呈现相同的内容

标签： html css layout browser

【解决方案1】：

按照标准开发，然后添加例外

目前，最流行的最兼容浏览器是 Firefox，因此开发到 Firefox 是自然而然的第一步。使用W3C 的验证器来确保您走上正轨。一旦你的页面大部分完成后，验证它在 Safari 和 Chrome 中仍然看起来不错（也是高度兼容的浏览器，所以你不应该有太多麻烦），然后开始为 IE 修复它（6 和 7）。相信我，它需要修复！在添加例外时，QuirksMode 之类的网站可以提供很大帮助。

始终使用 HTML 4.01 Strict DOCTYPE

这可能是这里比较有争议的观点之一，因为 XHTML 有很多支持者。不幸的是，以既兼容 IE 又兼容标准的方式提供 XHTML 文件是不可能的—— IE 无法识别 XHTML MIME 类型，并且将它们作为text/html 提供服务违反了标准。只有 HTML 4.01 Strict DOCTYPE 将所有浏览器置于（接近）标准模式，同时仍符合标准。欲了解更多信息，请查找DOCTYPE switching。如果您绝对不能不编写格式良好的 XML 页面，请使用XSL Transformation 将您的页面从您选择的 XML 风格转换为 HTML。

不要使用 CSS “hacks”

它们有时非常诱人，但黑客攻击是基于浏览器错误的副作用。因此，很难预测未来的浏览器将如何对它们做出反应。另一方面，条件 cmets 是 IE 浏览器的有意功能，因此可以安全使用。事实上，它们是一种将 IE 特定（通常是非验证）CSS 排除在有效样式表之外的绝佳方式。

不要创建像素对齐的布局

试图让所有浏览器都排成一行，精确到像素是一种挫败感（而且通常是徒劳的）。尝试创建在被破坏时仍然看起来不错的布局，因为它更容易修复两个左侧边框之间的错位，而不是页面两侧的左侧和右侧！使用具有内置边框的背景图像应该是一个大警告标志！

不要对字体使用绝对大小

并非每个人都使用与您相同尺寸的显示器；不要将脚注设置为font-size: 10px;，而是将其设置为font-size: smaller; 或font-size: 80%;。这是acessibility 的大问题。

不要依赖 CSS 属性的默认值

您永远不知道是否所有浏览器都使用相同的默认值。 YUI's "reset" stylesheet 是一个很好的起点。

【讨论】：

您必须记住，ASP.NET 2.0 控制 XHTML 1.0，实际上 MSDN 中声明您在 ASP.NET 2.0 中输出的任何内容都必须在 XHTML 1.0 中
同意除 HTML4 之外的所有内容。但是使用 HTML4 比使用 quirksmode 更好。
我不能说我对 ASP.NET 非常熟悉——在将 XHTML 输出发送到浏览器之前，是否可以通过 XSL 转换运行 XHTML 输出？我已经看到了用于将 XHTML “转换”为 HTML 的身份转换...... :-)

【解决方案2】：

让一个网站在所有浏览器和平台上看起来都完全相同几乎是不可能的。第一个原因是字体在 Windows、Mac、Linux、Solaris 等上的呈现方式不同。

我们遵循一种新思想：网站不必在不同的浏览器和平台上看起来完全相同。你可以很容易地把它带到那里的 96-98%。其余的将花费您过多的精力来获得潜在的收益。

我们开始开发 Firefox。如果我们做对了，其余的浏览器就非常接近了。大多数时候，IE 是真正棘手的问题。我建议您告诉您的客户或您自己，IE 6 不再是真正的要求。

使用“重置”css 样式表确保您从正确开始，该样式表将所有浏览器输出放在共同点上。签出：http://developer.yahoo.com/yui/reset/

最后，为自己省去一些麻烦，并在 ExtJS 或 JQuery 或 Prototype 等 Javascript 库上进行标准化，这样可以隐藏浏览器的差异，让您专注于项目的代码。

【讨论】：

我不同意。 IE 6 仍然是一个要求。由于 IE 7 与 6 相比相对较新，因此很少有大型企业客户拥有带有 Vista 甚至 XP 的新 PC。试着告诉运行 1500 个 Win 2000 机器的公司不需要 IE 6，他们会告诉你门在哪里。
IE6 确实应该，多可悲，大多数时候还是要考虑的。（如果每个人都只使用 Firefox 或 Chrome，我们的生活会轻松很多）
在 MS 终止对 XP 的企业支持之前，IE6 不会停止相关。就目前而言，它仍然至关重要——即使是现在，IE6 的市场份额也比所有版本的 Firefox 加起来还要大。我们可能不喜欢它，但我们不能忽视它。
毫无疑问，仍有一些企业仍在运行 2000。但运行 XP 的大公司远不止“少数”。事实上，由于支持合同到期的问题，大多数大公司将运行 2000，而是运行 XP。
@Mike：是的，但是 XP 附带 IE6。我工作过的大多数公司（无论大小）都不愿意将 IE7 作为强制更新推送，因此在他们采用 Vista 之前，IE6 将在企业中拥有庞大的用户群。

【解决方案3】：

确保您的 XHTML 和 CSS 有效。
仅使用标准 Javascript。
在一种主要（非 IE）浏览器中进行测试：我的建议是 Firefox 或 Chrome。
您的网站现在应该在主要（非 IE）浏览器中看起来非常接近
在 dillo 或 lynx（或两者兼有）中进行测试
最后，开始做一些技巧来让 IE 工作

【讨论】：

+1 用于 w3c 验证 - 解决验证错误可以解决很多布局差异
+1 也用于验证！它确实解决了很多差异。此外，添加 CSS 样式以在您工作时启用 IE 的 hasLayout 元素的“模式”，您必须在 hasLayout 上搜索网络，但是将position: relative; 添加到元素中启用 hasLayout。
我更喜欢“zoom:1”，因为它除了 hasLayout 之外没有任何影响。

【解决方案4】：

查看Browsershots。它使用各种浏览器对您的网站进行屏幕截图，因此您可以直观地检查它。这有点慢，但对我有用。

【讨论】：

很棒的提示，它有助于加快测试速度。

【解决方案5】：

这是我不久前给出的关于在浏览器中完善网站的答案（来自here）

其实，你在开发一个web应用的时候需要用到的有：

火狐
IE
野生动物园
（Chrome 即将推出...）

我的意思是，您应该在所有 3 种主要 A 级浏览器上测试您网站的每一步...所以如果在此过程中出现问题，您将确切知道是什么导致了中断。

如果您不定期通过浏览器检查您的网页效果如何，那么以后解决问题将变得更加困难。

【讨论】：

【解决方案6】：

很多开发人员喜欢从 FireFox 开始测试并转到 IE7。这样他们就拥有了最流行的浏览器。

我喜欢从 IE7 开始，而不是使用 FireFox，因为 Firefox 有这个 FireBug，它可以让我看到问题所在并进行更正。但我不得不说我正在慢慢改变以使用 FireFox 拳头进行测试，因为它确实更尊重所有规则。（顺便说一句，FireBug 在 IE 的 Javascript 中可用，所以很棒）。

当然，您应该看看谁是您的公众。如果它是公司内部使用的并且他们只使用 IE ......选择很简单。如果更适合开发人员，您将拥有更多使用 FireFox 的用户...您可能需要先进行测试，具体取决于您的受众。

但是，不要试图让它在所有浏览器上看起来都很完美，你会白白浪费时间。只需确保一切正常，并且所有 javascript 操作都正确完成。

【讨论】：

查看“Internet Explorer 开发者工具栏”。
也是 Web 开发助手 (projects.nikhilk.net/WebDevHelper)

【解决方案7】：

我建议确定您的目标受众，然后确定他们使用的浏览器。完成此操作后，请在该浏览器中追求完美。现在，您可以做一些工作，让它看起来适合其他浏览器。

如今在所有浏览器中追求完美无异于祈求世界和平。

您可以采取的另一种方法是使用 jQuery 之类的 Javascript 框架来减轻痛苦。

【讨论】：

【解决方案8】：

不要试图让每个浏览器都像其他浏览器一样显示像素完美...只有您自己知道！试着让它在每个浏览器上看起来都很好。

【讨论】：

【解决方案9】：

你永远不会完美，去吧尽你所能。
通常最好的办法是使用适用于所有领域的 CSS 子集浏览器而不是特定于浏览器黑客。
对于 javascript，请务必使用 javascript框架（JQuery/Prototype/YUI/Ext/等），和专门用于 dom 引用/操作。很难把这些东西做好，他们已经为你做了很多工作
好reference site

【讨论】：

【解决方案10】：

我发现使用更多的 CSS 而不是表格可以更轻松地在所有浏览器上获得相同的效果。它仍然有点棘手，但表格布局逻辑更糟。谨慎使用表格。

哦，让事情变得“有弹性”总是一个问题。固定宽度/高度更容易。

【讨论】：

【解决方案11】：

使用严格的文档类型。

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

如果您使用的是 ASP.NET，那么您应该添加/更改这是您的 web.config。

<system.web>
    <xhtmlConformance mode="Strict"/>

您还应该检查符合 css 的适配器。 http://www.asp.net/cssadapters/

我花了几个小时让我的website 在所有浏览器中显示相同，这似乎有效。最后一个建议。经常检查：在检查之前不要做太多，以确保所有浏览器都显示相同。

【讨论】：

或 XHTML1.1。比严格的 1.0 干净一点:)
我得去看看。

【解决方案12】：

为 Firefox 开发。然后应用特定于 IE 的修复程序。希望它能在 Chrome 和 Safari 中正常显示。

原因是有一些修复可以让 IE “正常”工作，但没有多少修复可以让 Firefox 表现不佳。

哦，买一份Transcending CSS。

【讨论】：

立即订购您推荐的书！ 10x

【解决方案13】：

我的方法是为 firefox、opera 和其他非 Microsoft 浏览器编写代码。一旦它在其中工作，我在单独的样式表/js 文件中修补 IE 功能。

我也经常使用 JS 库和 CSS 框架。 10 次中有 9 次我使用 Jquery 和 YUI Grids。

【讨论】：

【解决方案14】：

使用 JS 库，例如 ExtJS。这将样式的特定于浏览器的方面抽象出来。

只要清晰易读，在不同的浏览器中看起来不一样，是不是错了？

【讨论】：

【解决方案15】：

使用 CSSViewer Extension for firefox，它可以帮助您查看可以对代码进行的一些非常用户友好的修复。使用 CSS display:block 或 display:inline-block 属性，它们非常有用。边距、内边距、高度和宽度将是您的朋友，有时您需要指定这些值才能在许多浏览器上看到相同的内容。对于字体，我建议你阅读 yahoo yui fonts css 的东西。

【讨论】：

【解决方案16】：

好的，最好的方法是使用库和预先编写的代码。例如：永远不要使用 JavaScript，而是使用 JQuery，因为它与所有浏览器兼容，而不是编写自己的主题，而是使用免费的 css 主题。

它对我有用，可以帮助我节省大量时间。因为在专业市场上，时间就是金钱。

谢谢。

【讨论】：

其实说“从不使用javascript”是不合适的。但是您可以更喜欢使用类似 JQuery 的库来避免跨浏览器问题。

【解决方案17】：

使用严格的 doctype、有效的 xhtml/html 和有效的 CSS 是很好的起点。另外，请确保使用 reset/undo.css。

尽管有这些，还是会有捕获但很少

【讨论】：

【解决方案18】：

我首先在 FF 等中检查网站，然后“修复”该网站以使其在 IE 中看起来正常。大多数情况下，如果代码经过验证且简洁明了，则 IE 只需要少量的小编辑。我为 IE 使用不同的样式表。我不建议使用 hacks。对于 javascript，只使用一个库。是的，browsershots 帮助很大。

【讨论】：

“修复”是什么意思？您将冒着网站在 IR 而不是 FF 上正确显示的风险......
嗯，不。我只更改代码以在 either IE + FF ++ ... 上正确显示它或为 IE 添加新的样式属性

【解决方案19】：

IE7 也不再是必需的。现在，由于其令人不安的安全性，它已成为一种责任。 IE8 应该支持其他浏览器所做的大部分工作，而它不支持的部分无关紧要。体验会下降，但如果你一开始用的是IE，反正你也没有品味。

【讨论】：