【问题标题】:How can I test my webpage using different browsers?如何使用不同的浏览器测试我的网页?
【发布时间】:2010-10-17 13:14:00
【问题描述】:

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

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

【问题讨论】:

  • 你在编写 CSS 方面肯定不穷也不傻。我有 35% 的时间花在尝试让网站在所有浏览器/屏幕分辨率上看起来都正确。目前这确实是 IT 中的一个问题。

标签: yui cross-browser css-reset


【解决方案1】:

如果您对在您的机器上进行测试并不特别,您可以尝试https://browsershots.orghttps://blisk.io。这些是免费的,并在 Linux/Windows/Mac OS/BSD 上的各种浏览器中提供您网站的屏幕截图。

【讨论】:

    【解决方案2】:

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

    它允许在每个浏览器标签中使用不同的ie版本,并且是免费的。

    【讨论】:

      【解决方案3】:

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

      您有多种选择可以在多个浏览器中测试您的网站。最简单的方法是在本地机器上安装您想要测试的所有浏览器。主流浏览器有5种,安装多个版本都需要不同的方法。

      微软 Internet Explorer

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

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

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

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

      Mozilla 火狐

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

      谷歌浏览器

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

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

      苹果 Safari

      Safari 与 Google Chrome 的相似之处在于,没有一种简单的方法可以在同一台机器上运行多个版本。 Michel Fortin 有一篇文章详细介绍了how to get multiple versions running on Mac OS X。您可以参考this Stack Overflow question 了解有关 Windows 的详细信息。同样,虚拟图像似乎是唯一的出路。

      歌剧

      您可以毫无问题地安装旧版本的 Opera,只要它们安装到不同的目录即可。

      【讨论】:

      • 根据my question,看起来您可以在一台机器上运行多个版本的 Chrome,但您必须在不同的用户帐户下进行。
      【解决方案4】:

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


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

      【讨论】:

      • 只是一个小的修正:实际上是浏览器具有预定义的属性,而不是 HTML。这就是为什么重置所有内容很重要,这样所有浏览器最终看起来都一样或非常接近。
      【解决方案5】:

      一个重置的 CSS——YUI 只是其中一个例子——旨在消除浏览器在 HTML 元素的默认 CSS 属性中的差异,例如某些浏览器将在 html 上有一个默认的 8 像素填充元素(当我第一次发现这个 html 元素的样式时,我感到很惊讶)。

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

      【讨论】:

        【解决方案6】:

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

        对于重置 CSS,我将您重定向到 to this question.

        【讨论】:

        • Multiple IE 应用程序根本无法在 Vista 上运行 :(
        • Multiple IE 是个不错的应用 =) IE6 和 IE5 每 5 分钟崩溃一次,但这足以测试站点 =)
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2011-03-10
        • 1970-01-01
        • 2021-08-04
        • 1970-01-01
        相关资源
        最近更新 更多