CSS浏览器检测

Question

我不明白为什么我正在处理的HTML5网站在所有浏览器中都有所不同。我知道它一定是CSS，但我不知道是什么。

Chrome上的

：http://slackmoehrle.com/chrome.png

Safari上的

：http://slackmoehrle.com/safari.png

IE 7上的

：http://slackmoehrle.com/ie7.png

FireFox Mac上的

：http://slackmoehrle.com/firefox.png

可在此处找到样式表：http://slackmoehrle.com/css.css

任何人都可以有任何见解吗？

许多人都说浏览器检测不是一个好方法，但我不知道如何使这一切在各种浏览器中都能正常工作

更新：

不使用CSS重置：http://slackmoehrle.com/test/without-reset/

使用CSS重置：http://slackmoehrle.com/test/with-reset/

Answer 1

看一下使用CSS重置样式表

我个人最喜欢的是Meyer's：http://meyerweb.com/eric/tools/css/reset/

Answer 2

浏览器检测的唯一真正问题是，如果较新版本的浏览器支持某些新功能（例如圆形边框），但您仍会采取一些解决方法。

更好的方法是使用特征检测，因此如果它支持它们，您将能够使用某些特定的浏览器功能，而当不支持某些功能时，您将能够使用一些优雅的降级模式。

对于CSS，最实用的方法是为所有浏览器重置CSS，然后在所有浏览器中使用一些常见的CSS规则，并为不同的浏览器添加其他CSS文件，这些浏览器包含不同引擎应该不同的规则。 / p>

根据我的最新经验，几乎总是只能维护这些DIFF文件的两个版本 - 一个用于Firefox，Safari，Chrome，另一个用于IE系列。并使用JS的特征检测。

Answer 3

首先，没有javascript帮助，没有任何版本的IE可以处理HTML5的新元素。只有现代浏览器才能和IE不是现代浏览器。

就其他浏览器而言，我将不得不看更多，但我没有遇到任何我已经完成的网站的问题，但是，我不使用CSS重置并设置所有的CSS我自己的元素。