如何使用不同的浏览器测试我的网页?

时间:2009-04-04 13:01:29

标签: yui cross-browser css-reset

我刚刚发现了Yahoo UI Reset CSS工具/文件,我在我的网站上使用它。 在我的机器上,我有Internet Explorer 7和Firefox 3.01,我的网页在这两个浏览器上看起来是一样的。一位朋友正在使用Internet Explorer 6,页面完全一团糟。 我有两个问题:

  1. 我写CSS时是不是很穷/傻?
  2. 如何在我的机器上使用不同的浏览器测试我的网页?

7 个答案:

答案 0 :(得分:13)

仅仅因为你的网站在Internet Explorer 6中看起来很糟糕 意味着你在CSS上很糟糕。关于CSS有several documented bugs in Internet Explorer's rendering engine。网页设计师和开发人员多年来一直在努力解决这些问题。几个知名网站如DiggYouTube不再支持IE6。

您可以通过多种方式在多个浏览器中测试您的网站。最简单的方法是在本地计算机上安装要测试的所有浏览器。有5种主流浏览器,它们都需要不同的方法来安装多个版本。

Microsoft Internet Explorer

如果您使用的是Windows XP,则可以使用Multiple IEs安装Internet Explorer版本3,4.01,5,5.5和6.

如果您使用的是Windows Vista或Windows 7(或Windows XP),则可以使用Internet Explorer下载包含完全许可的Windows操作系统的virtual machine images from Microsoft。这些虚拟机映像每90到120天过期一次。他们提供以下图片:

  • 带有IE6的Windows XP SP3
  • 带有IE7的Windows XP SP3
  • 带有IE8的Windows XP SP3
  • Windows Vista with IE7
  • Windows Vista with IE8

这些图片都可以与免费Virtual PC 2007一起使用。

Mozilla Firefox

您可以在同一操作系统上安装多个版本的Firefox,但强烈建议您为要安装的每个版本创建新的配置文件。您可以使用Rob Cherny's blog上列出的步骤进行设置(文章指的是Firefox 2,但它也适用于Firefox 3和3.5)。或者,您可以使用MultiFirefox

谷歌浏览器

在同一台计算机上运行多个版本的Google Chrome并不是一种简单的方法。 Chrome安装是特定于用户帐户的,并且已提供独立版Chrome(请参阅question 3785991),因此您可以为要测试的每个旧版Chrome创建一个新的Windows / Mac用户帐户。

然而,自动和无声地应用更新的事实意味着您真的不必担心为旧版Chrome设计您的网站。如果这是不可接受的,您将需要使用多个用户帐户或之前建议的Internet Explorer虚拟映像。

Apple Safari

Safari类似于谷歌浏览器,因为没有一种简单的方法可以在同一台机器上运行多个版本。 Michel Fortin有一篇详细介绍how to get multiple versions running on Mac OS X的文章。您可以参考this Stack Overflow question获取Windows上的下拉列表。再次,虚拟图像似乎是唯一的出路。

您可以安装较旧版本的Opera,只要它们安装在不同的目录中即可。

答案 1 :(得分:7)

如果您不想在 计算机上进行测试,可以尝试http://browsershots.org。它是免费的,并在Linux / Windows / Mac OS / BSD上的各种浏览器中提供您网站的屏幕截图。

答案 2 :(得分:4)

重置CSS - 其中YUI只是一个示例 - 旨在删除HTML元素的默认CSS属性中的浏览器差异,例如某些浏览器将在 html 上具有默认的8像素填充元素(当我第一次发现时,我发现html元素的样式甚至让我惊讶。)

您的IE6问题与此完全不同。没有网站本身的例子,就不可能说明为什么会这样,但显而易见的猜测是你依赖于相当先进的CSS功能(例如> b选择器,:悬停在非锚点上,某些定位方案等等) )。

答案 3 :(得分:3)

对于IE,您可以使用此工具(Multiple IE)以旧版本测试您的网站。

对于重置CSS,我会重定向to this question.

答案 4 :(得分:1)

为了测试各种IE版本,我使用ietester

它允许每个浏览器选项卡中的不同版本,并且它是免费的。

答案 5 :(得分:0)

它的目的是HTML(编辑:浏览器具有elements.ty Zack的预定义属性)其元素具有一些预定义属性,例如段落元素的内置填充/边距。使用重置备忘单的要点是从所有元素相同的默认值开始:大小,边距,填充等。  我在项目中使用重置文件,但不是原始形式。您应该确定要使用的工作表中的哪些元素,并且始终可以为其中的标记分配其他默认值。


编辑:您可以通过安装大多数可用的浏览器来测试您的网页。 Here是表示浏览器使用情况的最新统计信息。 我的建议是使用Mozilla作为您的第一选择测试浏览器,并且不时地在其他浏览器上测试页面:IE6,IE7,IE8,Opera,Chrome和Safari(至少)。 这是关于一台PC上多个IE的讨论的reference。 祝你好运!

答案 6 :(得分:0)

  

谷歌浏览器   确实没有一种简单的方法可以在同一台机器上运行多个版本的谷歌浏览器

不正确。您可以在不同的用户帐户中使用不同版本的Chrome。