如何使用不同的浏览器测试我的网页？
我刚刚发现 Yahoo UI 重置 CSS 工具/文件，我正在使用它我的网站。 我的机器上有 Internet Explorer 7 和 Firefox 3.01，我的网页在这两个浏览器上看起来是一样的。 一位朋友正在使用 Internet Explorer 6，页面完全乱七八糟。 我有两个问题：
- 我写CSS有那么差/蠢吗？
- 如何在我的计算机上使用不同的浏览器测试我的网页？
I just found out about the Yahoo UI Reset CSS tool/file and I'm using it on my website.
On my machine I have Internet Explorer 7 and Firefox 3.01 and my webpage looks the same on these two browsers. A friend is using Internet Explorer 6 and the page is completely a mess.
I have two questions:
- Am I that poor/stupid in writing CSS?
- How can I test my webpage using different browsers on my machine?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
仅仅因为您的网站在 Internet Explorer 6 中看起来很糟糕，并不意味着您在 CSS 方面很糟糕。 Internet Explorer 渲染引擎中存在多个与 CSS 相关的已记录错误。 多年来，网页设计师和开发人员一直在与这些错误作斗争。 几个知名网站，例如 Digg 和 YouTube 将不再支持 IE6。
您有多种选择可以在多个浏览器中测试您的网站。 最简单的方法是在本地计算机上安装要测试的所有浏览器。 有5种主要浏览器，它们都需要不同的方法来安装多个版本。
Microsoft Internet Explorer
如果您使用的是 Windows XP，则可以使用多个 IE 安装 Internet Explorer 版本 3、4.01、 5、5.5 和 6。
如果您使用的是 Windows Vista 或 Windows 7（或 Windows XP），您可以下载 来自 Microsoft 的虚拟机映像，其中包含带有 Internet Explorer 的完全许可的 Windows 操作系统。 这些虚拟机映像每 90 到 120 天就会过期。 他们提供以下图像：
这些图像都可以与免费的 虚拟 PC 2007。
Mozilla Firefox
您可以在同一操作系统上安装多个版本的 Firefox，但强烈建议您为要安装的每个版本创建一个新的配置文件。 您可以使用 Rob Cherny 的博客中概述的步骤 进行设置（本文指的是 Firefox 2，但它也适用于 Firefox 3 和 3.5）。 或者，您可以使用 MultiFirefox。
Google Chrome
确实没有一种简单的方法可以在同一台计算机上运行多个版本的 Google Chrome。 Chrome 安装是特定于用户帐户的，并且已经提供了独立版本的 Chrome（请参阅 问题 3785991），这样您就可以为要测试的每个旧版 Chrome 创建一个新的 Windows/Mac 用户帐户。
然而，更新是自动且静默地应用的事实意味着您实际上不必太担心为旧版本的 Chrome 设计网站。 如果这是不可接受的，您将需要使用多个用户帐户或虚拟映像（如之前针对 Internet Explorer 所建议的那样）。
Apple Safari
Safari 与 Google Chrome 类似，因为没有一种简单的方法可以在同一台计算机上运行多个版本。 Michel Fortin 有一篇文章详细介绍了如何在 Mac OS X 上运行多个版本 。 您可以参考此 Stack Overflow 问题了解 Windows 上的情况。 虚拟图像似乎又是唯一的出路。
Opera
您可以毫无问题地安装旧版本的 Opera，只要它们安装到不同的目录即可。
Just because your website looks terrible in Internet Explorer 6 does not mean you are terrible at CSS. There are several documented bugs in Internet Explorer's rendering engine in regards to CSS. Web designers and developers have been struggling with these bugs for years. Several well known websites like Digg and YouTube are no longer going to support IE6.
You have several options to test your website in multiple browsers. The easiest way is to install all the browsers you want to test against on a local machine. There are 5 major browsers, and they all require different methods to install multiple versions.
Microsoft Internet Explorer
If you are using Windows XP, you can use Multiple IEs to install Internet Explorer versions 3, 4.01, 5, 5.5 and 6.
If you are using Windows Vista or Windows 7 (or Windows XP for that matter) you can download virtual machine images from Microsoft that contain a fully licensed Windows operating system with Internet Explorer. These virtual machine images expire every 90 to 120 days. They offer the following images:
These images can all be used with the free Virtual PC 2007.
Mozilla Firefox
You can install multiple versions of Firefox on the same operating system, but it is highly advised that you create a new profile for each version you are going to install. You can use the steps outlined on Rob Cherny's blog to set this up (the article is referring to Firefox 2, but it works for Firefox 3 and 3.5 too). Alternatively, you can use MultiFirefox.
Google Chrome
There really isn't an easy way to run multiple versions of Google Chrome on the same machine. Chrome installations are user account-specific, and standalone versions of Chrome have been made available (see question 3785991), so you can create a new Windows/Mac user account for each old version of Chrome you want to test.
However, the fact that updates are applied automatically and silently means that you really shouldn't worry to much about designing your website for older versions of Chrome. If this is unacceptable, you will need to use multiple user accounts, or virtual images as advised for Internet Explorer previously.
Apple Safari
Safari is similar to Google Chrome in that there isn't an easy way to run multiple versions on the same machine. Michel Fortin has an article that details how to get multiple versions running on Mac OS X. You can refer to this Stack Overflow question for the lowdown on Windows. Virtual images, again, seem to be the only way to go.
Opera
You can install older versions of Opera without issue, so long as they are installed to different directories.
如果您不介意在您的机器上进行测试，您可以尝试https://browsershots.org 或 https://blisk.io。 这些都是免费的，并提供您的站点在 Linux/Windows/Mac OS/BSD 上的各种浏览器中的屏幕截图。
If you are not particular about testing in your machine, you could try https://browsershots.org or https://blisk.io. These are free and provide screenshots of your site in various browsers on Linux/Windows/Mac OS/BSD.
重置 CSS（YUI 只是其中一个示例）旨在消除 HTML 元素默认 CSS 属性中的浏览器差异，例如某些浏览器在 html 元素上具有默认的 8 像素填充（它当我第一次发现时，我惊讶地发现 html 元素甚至被设计了样式）。
您的 IE6 问题与此完全不同。 如果没有网站本身的示例，就不可能说出为什么会出现这种情况，但明显的猜测是您依赖于相当高级的 CSS 功能（例如 a > b 选择器、:hover 在非锚点上、某些定位方案等） ）。
A reset CSS--of which YUI's is only one example--aim to remove browser differences in default CSS properties for HTML elements, like some browsers will have a default 8 pixel padding on the html element (it was a surprise to me to find the html element was even styled when I first found out).
Your IE6 issues are entirely separate to that. Without examples of the site itself it's impossible to say why this might be but the obvious guess is that you're relying on reasonably advanced CSS features (eg a > b selectors, :hover on non-anchors, certain positioning schemes and so on).
对于IE，您可以使用此工具（多IE）在旧版本中测试您的网站。
对于重置 CSS，我将您重定向到这个问题。
For IE you can use this tool (Multiple IE) to test your website in old versions.
For the Reset CSS i redirect you to this question.
为了测试各种 IE 版本，我使用 ietester
它允许每个浏览器选项卡中使用不同的 ie 版本而且它是免费的。
For testing various IE versions I use ietester
It allows different ie versions in each browser tab and it's free.
其目的是 HTML（编辑：浏览器具有元素的预定义属性。ty Zack）为其元素提供了一些预定义属性，例如段落元素的内置填充/边距。 使用重置备忘单的要点是从所有元素都相等的默认值开始：大小、边距、填充等。
我在项目中使用重置文件，但不是以其原始形式。 您应该决定使用工作表中的哪些元素，并且您始终可以为那里的标签分配其他默认值。
编辑：您可以通过安装大多数可用的浏览器来测试您的网页。 此处是代表浏览器使用情况的最新统计数据。
我的建议是使用 Mozilla 作为您的第一选择测试浏览器，并时不时地在其他浏览器上测试页面：IE6、IE7、IE8、Opera、Chrome 和 Safari（至少）。
以下是关于一台 PC 上多个 IE 讨论的参考。
祝你好运！
The purpose of it is that HTML(edit: the browsers have predefined properties for the elements.ty Zack) has some predefined properties for its elements like the built-in padding/margin for the paragraph element. The point of using the reset cheat sheet is to start with default values that are equal for all elements : size, margin, padding etc.
I use the reset file in my project but not in its original form. You should decide which elements in the sheet to use and you can always assign other default values for the tags there.
edit: You can test your web-page by installing most of the browsers available. Here is the latest statistics representing the usage of browsers.
My advice is to use Mozilla as your 1st choice testing browser and every now and then test the page on other browsers: IE6, IE7, IE8, Opera, Chrome and Safari (at least).
Here is a reference to a discussion about multiple IEs on one PC.
Best of luck!