yui - 如何使用不同的浏览器测试我的网页？

Question

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

1. 我在编写 CSS 方面有那么差/愚蠢吗？
2. 如何在我的机器上使用不同的浏览器测试我的网页？

Answer 1

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:

• Windows XP SP3 with IE6
• Windows XP SP3 with IE7
• Windows XP SP3 with IE8
• Windows Vista with IE7
• Windows Vista with IE8

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.

Answer 2

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.

Answer 3

一个重置的 CSS——YUI 只是其中一个例子——旨在消除浏览器在 HTML 元素的默认 CSS 属性中的差异，例如某些浏览器将在html元素上具有默认的 8 像素填充（我很惊讶地发现当我第一次发现时，甚至对 html 元素进行了样式设置）。

您的 IE6 问题与此完全不同。如果没有网站本身的示例，就不可能说出为什么会这样，但很明显的猜测是您依赖于相当高级的 CSS 功能（例如 a > b 选择器，:hover 在非锚点上，某些定位方案等） .

Answer 4

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

对于重置 CSS，我将您重定向到这个问题。

Answer 5

For testing various IE versions I use ietester

It allows different ie versions in each browser tab and it's free.

Answer 6

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

---

编辑：您可以通过安装大多数可用的浏览器来测试您的网页。这是代表浏览器使用情况的最新统计数据。我的建议是使用 Mozilla 作为测试浏览器的第一选择，并且时不时地在其他浏览器上测试页面：IE6、IE7、IE8、Opera、Chrome 和 Safari（至少）。这是对关于一台 PC 上的多个 IE 的讨论的参考。祝你好运！