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:
我刚刚发现了Yahoo UI Reset CSS工具/文件,我在我的网站上使用它。在我的机器上,我有Internet Explorer 7和Firefox 3.01,我的网页在这两个浏览器上看起来是一样的。一位朋友正在使用Internet Explorer 6,页面完全是一团糟。我有两个问题:
- Am I that poor/stupid in writing CSS?
- How can I test my webpage using different browsers on my machine?
我在编写CSS时是穷人/傻瓜吗?
如何在我的机器上使用不同的浏览器测试我的网页?
7 个解决方案
#1
If you are not particular about testing in your machine, you could try http://browsershots.org. It's free and provides screenshots of your site in various browsers on Linux/Windows/Mac OS/BSD.
如果您不是特别想在机器中进行测试,可以尝试http://browsershots.org。它是免费的,并在Linux / Windows / Mac OS / BSD的各种浏览器中提供您网站的屏幕截图。
#2
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.
仅仅因为你的网站在Internet Explorer 6中看起来很糟糕并不意味着你在CSS上很糟糕。关于CSS,Internet Explorer的渲染引擎中存在多个记录的错误。网页设计师和开发人员多年来一直在努力解决这些问题。 Digg和YouTube等几个知名网站不再支持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.
您可以通过多种方式在多个浏览器中测试您的网站。最简单的方法是在本地计算机上安装要测试的所有浏览器。有5种主流浏览器,它们都需要不同的方法来安装多个版本。
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.
如果您使用的是Windows XP,则可以使用多个IE来安装Internet Explorer版本3,4.01,5,5.5和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 Vista或Windows 7(或Windows XP),则可以从Microsoft下载包含具有Internet Explorer的完全许可Windows操作系统的虚拟机映像。这些虚拟机映像每90到120天过期一次。他们提供以下图像:
- Windows XP SP3 with IE6
- Windows XP SP3 with IE7
- Windows XP SP3 with IE8
- Windows Vista with IE7
- Windows Vista with IE8
带有IE6的Windows XP SP3
带有IE7的Windows XP SP3
带有IE8的Windows XP SP3
Windows Vista与IE7
Windows Vista与IE8
These images can all be used with the free Virtual PC 2007.
这些图像都可以与免费的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.
您可以在同一操作系统上安装多个版本的Firefox,但强烈建议您为要安装的每个版本创建新的配置文件。您可以使用Rob Cherny博客上列出的步骤进行设置(文章指的是Firefox 2,但它也适用于Firefox 3和3.5)。或者,您可以使用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.
确实没有一种简单的方法可以在同一台机器上运行多个版本的谷歌浏览器。 Chrome安装是特定于用户帐户的,并且已提供独立版Chrome(请参阅问题3785991),因此您可以为要测试的每个旧版Chrome创建新的Windows / Mac用户帐户。
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.
但是,自动和静默应用更新的事实意味着您真的不必担心为旧版Chrome设计您的网站。如果这是不可接受的,您将需要使用多个用户帐户或之前建议的Internet Explorer虚拟映像。
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.
Safari与谷歌浏览器类似,因为没有一种简单的方法可以在同一台机器上运行多个版本。 Michel Fortin有一篇文章详细介绍了如何在Mac OS X上运行多个版本。你可以参考这个Stack Overflow问题来了解Windows的低端问题。再次,虚拟图像似乎是唯一的出路。
Opera
You can install older versions of Opera without issue, so long as they are installed to different directories.
您可以毫无问题地安装旧版本的Opera,只要它们安装在不同的目录中即可。
#3
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).
重置CSS - 其中YUI只是一个示例 - 旨在消除HTML元素的默认CSS属性中的浏览器差异,例如某些浏览器将在html元素上具有默认的8像素填充(我发现这是一个惊喜当我第一次发现时,html元素甚至是样式的。
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).
您的IE6问题与此完全不同。没有网站本身的例子,就不可能说明为什么会这样,但显而易见的猜测是你依赖于相当先进的CSS功能(例如> b选择器,:悬停在非锚点,某些定位方案等) 。
#4
For IE you can use this tool (Multiple IE) to test your website in old versions.
对于IE,您可以使用此工具(多个IE)以旧版本测试您的网站。
For the Reset CSS i redirect you to this question.
对于重置CSS,我将您重定向到此问题。
#5
For testing various IE versions I use ietester
为了测试各种IE版本,我使用ietester
It allows different ie versions in each browser tab and it's free.
它允许每个浏览器选项卡中的不同版本,并且它是免费的。
#6
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.
它的目的是HTML(编辑:浏览器具有elements.ty Zack的预定义属性)其元素具有一些预定义属性,如段落元素的内置填充/边距。使用重置备忘单的要点是从所有元素的默认值开始:大小,边距,填充等。我在项目中使用重置文件但不是原始形式。您应该确定要使用的工作表中的哪些元素,并且始终可以为其中的标记分配其他默认值。
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!
编辑:您可以通过安装大多数可用的浏览器来测试您的网页。以下是表示浏览器使用情况的最新统计信息。我的建议是使用Mozilla作为您的第一选择测试浏览器,并且不时地在其他浏览器上测试页面:IE6,IE7,IE8,Opera,Chrome和Safari(至少)。以下是对一台PC上多个IE的讨论的参考。祝你好运!
#7
Google Chrome There really isn't an easy way to run multiple versions of Google Chrome on the same machine
谷歌浏览器在同一台计算机上运行多个版本的谷歌浏览器真的不是一种简单的方法
Not true. You can have different version of Chrome in differnet user accounts.
不对。您可以在不同的用户帐户中使用不同版本的Chrome。
#1
If you are not particular about testing in your machine, you could try http://browsershots.org. It's free and provides screenshots of your site in various browsers on Linux/Windows/Mac OS/BSD.
如果您不是特别想在机器中进行测试,可以尝试http://browsershots.org。它是免费的,并在Linux / Windows / Mac OS / BSD的各种浏览器中提供您网站的屏幕截图。
#2
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.
仅仅因为你的网站在Internet Explorer 6中看起来很糟糕并不意味着你在CSS上很糟糕。关于CSS,Internet Explorer的渲染引擎中存在多个记录的错误。网页设计师和开发人员多年来一直在努力解决这些问题。 Digg和YouTube等几个知名网站不再支持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.
您可以通过多种方式在多个浏览器中测试您的网站。最简单的方法是在本地计算机上安装要测试的所有浏览器。有5种主流浏览器,它们都需要不同的方法来安装多个版本。
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.
如果您使用的是Windows XP,则可以使用多个IE来安装Internet Explorer版本3,4.01,5,5.5和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 Vista或Windows 7(或Windows XP),则可以从Microsoft下载包含具有Internet Explorer的完全许可Windows操作系统的虚拟机映像。这些虚拟机映像每90到120天过期一次。他们提供以下图像:
- Windows XP SP3 with IE6
- Windows XP SP3 with IE7
- Windows XP SP3 with IE8
- Windows Vista with IE7
- Windows Vista with IE8
带有IE6的Windows XP SP3
带有IE7的Windows XP SP3
带有IE8的Windows XP SP3
Windows Vista与IE7
Windows Vista与IE8
These images can all be used with the free Virtual PC 2007.
这些图像都可以与免费的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.
您可以在同一操作系统上安装多个版本的Firefox,但强烈建议您为要安装的每个版本创建新的配置文件。您可以使用Rob Cherny博客上列出的步骤进行设置(文章指的是Firefox 2,但它也适用于Firefox 3和3.5)。或者,您可以使用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.
确实没有一种简单的方法可以在同一台机器上运行多个版本的谷歌浏览器。 Chrome安装是特定于用户帐户的,并且已提供独立版Chrome(请参阅问题3785991),因此您可以为要测试的每个旧版Chrome创建新的Windows / Mac用户帐户。
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.
但是,自动和静默应用更新的事实意味着您真的不必担心为旧版Chrome设计您的网站。如果这是不可接受的,您将需要使用多个用户帐户或之前建议的Internet Explorer虚拟映像。
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.
Safari与谷歌浏览器类似,因为没有一种简单的方法可以在同一台机器上运行多个版本。 Michel Fortin有一篇文章详细介绍了如何在Mac OS X上运行多个版本。你可以参考这个Stack Overflow问题来了解Windows的低端问题。再次,虚拟图像似乎是唯一的出路。
Opera
You can install older versions of Opera without issue, so long as they are installed to different directories.
您可以毫无问题地安装旧版本的Opera,只要它们安装在不同的目录中即可。
#3
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).
重置CSS - 其中YUI只是一个示例 - 旨在消除HTML元素的默认CSS属性中的浏览器差异,例如某些浏览器将在html元素上具有默认的8像素填充(我发现这是一个惊喜当我第一次发现时,html元素甚至是样式的。
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).
您的IE6问题与此完全不同。没有网站本身的例子,就不可能说明为什么会这样,但显而易见的猜测是你依赖于相当先进的CSS功能(例如> b选择器,:悬停在非锚点,某些定位方案等) 。
#4
For IE you can use this tool (Multiple IE) to test your website in old versions.
对于IE,您可以使用此工具(多个IE)以旧版本测试您的网站。
For the Reset CSS i redirect you to this question.
对于重置CSS,我将您重定向到此问题。
#5
For testing various IE versions I use ietester
为了测试各种IE版本,我使用ietester
It allows different ie versions in each browser tab and it's free.
它允许每个浏览器选项卡中的不同版本,并且它是免费的。
#6
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.
它的目的是HTML(编辑:浏览器具有elements.ty Zack的预定义属性)其元素具有一些预定义属性,如段落元素的内置填充/边距。使用重置备忘单的要点是从所有元素的默认值开始:大小,边距,填充等。我在项目中使用重置文件但不是原始形式。您应该确定要使用的工作表中的哪些元素,并且始终可以为其中的标记分配其他默认值。
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!
编辑:您可以通过安装大多数可用的浏览器来测试您的网页。以下是表示浏览器使用情况的最新统计信息。我的建议是使用Mozilla作为您的第一选择测试浏览器,并且不时地在其他浏览器上测试页面:IE6,IE7,IE8,Opera,Chrome和Safari(至少)。以下是对一台PC上多个IE的讨论的参考。祝你好运!
#7
Google Chrome There really isn't an easy way to run multiple versions of Google Chrome on the same machine
谷歌浏览器在同一台计算机上运行多个版本的谷歌浏览器真的不是一种简单的方法
Not true. You can have different version of Chrome in differnet user accounts.
不对。您可以在不同的用户帐户中使用不同版本的Chrome。