Firefox与IE与Chrome与Safari的比较

Question

Firefox与IE与Chrome与Safari的比较

htmlcsslayoutbrowser

15

目前我正在设计一个网站，但非常难以在所有浏览器上完美地显示网站。

有什么规则、建议等需要遵循吗？

谢谢。

- David Bonnici

首先，你有它的链接吗？如果很紧急，我相信我们可以为您修复它。其次，您使用的是哪个版本的(X)HTML，并且您是否按照标准编写（验证）？ - Mike B

4

网站在每个浏览器中都需要完全一样吗？ - singpolyma

很遗憾，该网站在不同的浏览器中呈现相同的效果（至少在IE和Firefox中）。 - gav

19个回答

23

在不同的浏览器和平台上，要让网站看起来完全一致几乎是不可能的。首要原因是不同操作系统下的字体渲染方式不同，包括Windows、Mac、Linux、Solaris等。

我们有一个新的思路：网站不必在不同浏览器和平台上完全相同，你可以很容易地达到96-98%的相似度。其它精细的调整可能需要花费大量的时间和精力去完成，但所得带来的潜在收益却微乎其微。

我们从Firefox开始进行开发。如果我们在Firefox上做得对，其它浏览器也就差不多了。IE是最难以正确处理的浏览器，我建议你告诉客户或者自己，IE6其实已经不再是必须支持的标准了。

确保你从一开始就使用一个“重置”CSS样式表，使所有浏览器输出的布局都处于公共基础上。请参考：http://developer.yahoo.com/yui/reset/

最后，为自己省些麻烦，统一使用像ExtJS、JQuery或Prototype这样的Javascript库，它们会隐藏浏览器间的差异，让你可以专注于项目代码的编写。

- Mike

3

我不同意。IE 6仍然是必需品。由于相对于IE 6来说IE 7还比较新，很少有大型企业客户使用安装有Vista甚至XP的新电脑。试着告诉一家运行1500台Win 2000计算机的公司，IE 6不是必需品，他们会让你滚蛋。 - davethegr8

1

IE6确实应该被考虑在内，尽管可能很遗憾。如果每个人都使用Firefox或Chrome，我们的生活会变得更加轻松。 - Pim Jager

3

直到微软停止对XP提供企业支持，IE6才会不再重要。现在情况是，即使是现在，IE6的市场份额仍然比所有Firefox版本的市场份额加起来都要大，因此它仍然至关重要。我们可能不喜欢它，但不能忽视它。 - Ben Blank

1

毫无疑问，仍有一些企业在运行2000。但是运行XP的大型公司远不止“少数”。事实上，由于支持合同到期的问题，大多数大型公司将不会运行2000而是XP。 - Mike

2

@Mike：是的，但XP 预装 IE6。我曾为许多公司工作（无论大小），它们大多数都不愿意将IE7推广为强制更新，因此在它们采用Vista之前，IE6将在企业中拥有大量用户基础。 - Ben Blank

显示剩余5条评论

12

确保您的XHTML和CSS验证。
只使用标准Javascript。
在一个主要的（非IE）浏览器中进行测试：我建议使用Firefox或Chrome。
您的网站现在应该在主要的（非IE）浏览器中显示非常接近。
在类似dillo或lynx的浏览器中进行测试（或两者都可以）。
最后，开始进行破解以使IE正常工作。

- singpolyma

+1 用于w3c验证 - 解决验证错误可以解决许多布局差异。 - matt b

+1 的验证确实可以解决许多差异。此外，在工作时添加启用IE的元素 hasLayout 'mode'的 CSS 样式，你将不得不在网上搜索 hasLayout，但是像将 position: relative; 添加到元素就能启用 hasLayout。 - Astra

我更喜欢“zoom:1”，因为它不会影响除hasLayout之外的任何其他内容。 - I.devries

10

请查看Browsershots。它可以使用各种浏览器对您的网站进行截屏，让您可以通过视觉方式进行检查。虽然速度有点慢，但对我来说很有效。

- Drejc

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

5

以下是我一段时间前在Stack Overflow上关于在浏览器中完善网站的回答（来源：这里）

实际上，在开发Web应用程序时，您需要使用以下浏览器：

FireFox
IE
Safari
(Chrome即将推出...)

我的意思是，您应该在所有三个主要的Grade-A浏览器上测试您网站的每一个步骤...这样，如果在过程中出现问题，您将知道导致故障的原因。

如果您不经常检查浏览器以了解页面的效果，那么以后修复问题就会更加困难。

- Dreas

4

很多开发者喜欢从FireFox开始测试，然后再去测试IE7。这样他们就可以同时拥有两个最受欢迎的浏览器。

我喜欢从IE7开始测试，然后再去测试FireFox，因为FireFox有FireBug，让我能够看到问题并进行更正。但是我必须说，我正在慢慢地改变，先用FireFox进行测试，因为它更加尊重所有规则。（顺便说一下，FireBug也适用于IE的Javascript，非常棒）。

当然，你应该考虑你的受众群体是谁。如果它只在公司内部使用，并且他们只使用IE……选择很简单。如果更多的是面向开发者，你将会有更多的用户使用FireFox……根据你的受众群体，你可能需要首先进行测试。

但是，不要试图让它在所有浏览器上看起来都完美，否则你会浪费时间。只需确保一切看起来都没问题，所有的Javascript操作都正确执行即可。

- Daok

请查看“Internet Explorer 开发者工具栏”。 - Vilx-

同时，Web开发助手（http://projects.nikhilk.net/WebDevHelper/） - Mauricio Scheffer

4

我建议先确定目标受众，然后确定他们使用的浏览器。一旦完成这一步骤，请在该浏览器上追求完美。现在，您可以进行一些其他浏览器的工作，并使其看起来好看。

今天在所有浏览器中追求完美就像要求世界和平一样难。

您可以采用另一种方法，即使用像jQuery这样的Javascript框架来减轻痛苦。

- Sai

3

不要试图让每个浏览器都像其他浏览器一样完美地显示它...只有你知道！只需尝试使其在每个浏览器上看起来好看即可。

- RoBorg

3

你永远不可能达到完美，尽力做到最好。
通常最好的方法是使用在所有浏览器中都有效的CSS子集，而不是针对特定浏览器的hack。
对于JavaScript，请确保使用JavaScript框架（JQuery / Prototype / YUI / Ext / 等），并且仅使用它进行DOM引用/操作。这很难做到正确，而他们已经为您完成了大部分工作。
好的参考网站

- Matt Briggs

3

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

噢，让事物变“伸缩”的是一个常见问题。固定宽度/高度更容易处理。

- Vilx-

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ben Blank · Accepted Answer

按照标准进行开发，再添加例外

目前，最受欢迎的大部分兼容浏览器是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“hack”

有时候它们可能很诱人，但是这些hack都是基于浏览器漏洞的副作用。因此，很难甚至不可能预测未来的浏览器对其的反应。另一方面，条件注释是IE浏览器的一个有意的特性，因此可以放心使用。实际上，它们是保持IE特定（通常是非验证）CSS不进入有效样式表的绝佳方法。

不要创建像素对齐的布局

试图让所有浏览器 完全像素对齐 是一种沮丧（而且经常是徒劳无功）的练习。尽量创建布局，即使被破坏也仍然看起来还可以，因为修复两个左边框之间的错位比修复在页面两侧的左右边框更容易！使用内置边框的背景图像应该是一个大警告标志！

不要使用绝对大小的字体

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

不要依赖CSS属性的默认值

你永远不知道所有浏览器是否使用相同的默认样式。YUI的“reset”样式表是一个很好的起点。