Html 如何确保 CSS 在所有浏览器上都能正常工作，而无需在每个浏览器上进行眼睛测试？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/978832/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make sure the CSS work fine with all browsers without eye testing on each browser?
提问by pang
Making CSS for one website to support for all browsers in different version is really difficult. Especially, it needs to have different browsers set up. I just wonder is it possible to test the CSS and make sure it works with all browsers without open each browser and manually check the layout? or Is there any quick or standard way to do this?
为一个网站制作 CSS 以支持不同版本的所有浏览器真的很困难。特别是，它需要设置不同的浏览器。我只是想知道是否可以测试 CSS 并确保它适用于所有浏览器，而无需打开每个浏览器并手动检查布局？或者是否有任何快速或标准的方法来做到这一点？
回答by ólafur Waage
- Use a CSS Reset stylesheet
- Use good CSS frameworks(blueprint, boilerplate etc.)
- This is not possible.
- 使用 CSS 重置样式表
- 使用好的 CSS 框架（蓝图、样板等）
- 这不可能。
回答by Paolo Bergantino
A few important things to get you started on your journey:
一些重要的事情可以让你开始你的旅程：
- Use a DOCTYPEor you'll throw browsers into quirks mode.
- Reset your CSSso you can apply the styles youwant to elements.
- Use a Javascript library- the popular one around these parts is jQuery, and it is the one I personally recommend. However, it doesn't really matter which one you go with as long as you use one. A lot of smart guys have put a lot of hours into taking care of all the incompatibilities between browsers. Trying to do a lot of dynamic stuff on your website with pure Javascript is bordering on masochistic.
- 使用 DOCTYPE否则你会让浏览器进入怪癖模式。
- 重置您的CSS，所以你可以应用样式您想要的元素。
- 使用 Javascript 库- 围绕这些部分流行的库是 jQuery，它是我个人推荐的库。然而，只要你使用一个，你用哪一个并不重要。很多聪明人已经花了很多时间来处理浏览器之间的所有不兼容性。尝试使用纯 Javascript 在您的网站上做很多动态的事情近乎自虐。
Once I started doing these things, making my site work the same across browsers got a whole lot easier. No matter what, however, you willhave to check them all. There's just no way around that.
一旦我开始做这些事情，让我的网站在浏览器上的工作变得更加容易。但是，无论如何，您都必须检查它们。没有办法解决这个问题。
回答by Dan Herbert
It would be nice if there was an automated tool to do this. Unfortunately, the only way to tell if something is visually correct is by looking at it.
如果有一个自动化工具来做到这一点就好了。不幸的是，判断某事物在视觉上是否正确的唯一方法是观察它。
There are services (such as BrowserShots) that will visit your site on different browsers and take a screen capture for you and then let you download a file containing all of the renderings of your site, but you would still have to verify them manually.
有些服务（例如BrowserShots）会在不同的浏览器上访问您的网站并为您截屏，然后让您下载包含您网站所有渲染的文件，但您仍然需要手动验证它们。
Computers aren't very good at telling if something looks "nice" automatically or else all browsers would always do exactly what you mean (make stuff pretty).
计算机不太擅长自动判断某些东西是否看起来“不错”，否则所有浏览器都会完全按照你的意思去做（让东西变得漂亮）。
If you're looking to test out JavaScript, you could try a test suite called Selenium.
如果您想测试 JavaScript，您可以尝试一个名为Selenium的测试套件。
In the future you could look into a project started by the creator of jQuery called Test Swarm, which looks promising, but is still in testing stages and may not ever be released due to bandwidth costs. It would allow you to test your JavaScript on every major browser on every major platform using a distributed system. This is still very much a pipe dream however because of some of the complications involved with such a system.
将来，您可以查看由 jQuery 的创建者发起的名为 Test Swarm 的项目，它看起来很有前景，但仍处于测试阶段，由于带宽成本的原因可能永远不会发布。它将允许您使用分布式系统在每个主要平台上的每个主要浏览器上测试您的 JavaScript。然而，这仍然是一个白日梦，因为这样的系统涉及一些复杂性。
回答by Tom
There's not really a standard way to do this - it's just the nature of the beast; however, Adobe is currently working on BrowserLabswhich should help to solve this exact issue.
没有真正的标准方法来做到这一点——这只是野兽的本性；但是，Adobe 目前正在开发BrowserLabs，这应该有助于解决这个确切的问题。
回答by gonzohunter
You cant really get round human UI testing. I agree with the others that you should be standards compliant and reset css.
您无法真正绕过人类 UI 测试。我同意其他人的意见，您应该符合标准并重置 css。
Rarely will you get HTML + CSS to render exactly the same across all browsers and on all platforms, purely due to the idiosyncrasies of each browsers. But, just because there are slight rendering differences, doesn't necessarily mean something is wrong, this is a good reason for human UI testing.
您很少会获得 HTML + CSS 在所有浏览器和所有平台上呈现完全相同的效果，这纯粹是由于每个浏览器的特性。但是，仅仅因为有轻微的渲染差异，并不一定意味着有问题，这是人类 UI 测试的一个很好的理由。
回答by Web Designer cum Promoter
- Make sure you declare a doc-type.
- Use reset css.
- Avoid using width and padding(left and right) on the same element where you can.
- clean the code in HTML and css.
- Don't use margin left and right when floating elements and use its parent overflow:hidden, display:inline and height: 1% if the parent does not already have a height.
- Don't give an element both margin-top or margin-bottom but only margin-top or
margin-bottom. Because margins of adjacent elements collapse into one another, making the positioning somewhat unpredictable for novices. - Don't rely on z-index unless your scripting needs it.
- 确保你声明了一个文档类型。
- 使用重置CSS。
- 尽可能避免在同一个元素上使用宽度和填充（左和右）。
- 清理 HTML 和 css 中的代码。
- 浮动元素时不要使用左右边距，并使用其父级 overflow:hidden、display:inline 和 height: 1% 如果父级还没有高度。
- 不要同时提供 margin-top 或 margin-bottom 元素，而只提供 margin-top 或
margin-bottom 。因为相邻元素的边距相互折叠，使得定位对于新手来说有些不可预测。 - 除非您的脚本需要它，否则不要依赖 z-index。
<!--[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script> <![endif]--> <script type="text/javascript" src="js/html5shiv.js" ></script> <script type="text/javascript" src="js/html5.js" ></script>
<!--[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script> <![endif]--> <script type="text/javascript" src="js/html5shiv.js" ></script> <script type="text/javascript" src="js/html5.js" ></script>
you can download shiv.js form this browser compact
你可以从这个浏览器中下载 shiv.js
browser compatibility testing tools:
浏览器兼容性测试工具：
http://crossbrowsertesting.com/
http://crossbrowsertesting.com/
回答by wdalhaj
I suggest using one of the ready to use Front-End Development Frameworks like Twitter Bootstrapor Foundation. Both are well documented and pretested , so this will reduce the pain of testing.
我建议使用一种现成的前端开发框架，如Twitter Bootstrap或Foundation。两者都有很好的文档记录和预先测试，因此这将减少测试的痛苦。
They contain :
他们包含 ：
CSS Reset/Normalize
Ready to use components (Buttons, Form Elements, Menus ... etc ).
Grid Layout (Which is the perfect way to arrange stuff in your web page).
JavaScript.
CSS 重置/标准化
随时可用的组件（按钮、表单元素、菜单...等）。
网格布局（这是在网页中排列内容的完美方式）。
JavaScript。
Of course you will need to do your own testing as you tweak those frameworks, in addition to all tools mentioned above, i suggest IE-Tester, really awesome debugging tool for IE (Which is the source of the pain).
当然，在调整这些框架时，您需要进行自己的测试，除了上面提到的所有工具之外，我建议使用IE-Tester，这是一款非常棒的 IE 调试工具（这是痛苦的根源）。
Finally, And for the sake of perfection , it's better to test your website (as possible as you can) cross all browsers and devices specially if your doing responsive design.
最后，为了完美，最好测试您的网站（尽可能）跨所有浏览器和设备，特别是如果您进行响应式设计。
You have no choice but to do it! That's why web designers salary's is usually high x-)
你别无选择，只能这样做！这就是为什么网页设计师的薪水通常很高 x-)
