为什么我的网站在每个浏览器上都有所不同？

Question

请查看我网站的这个片段。

http://jsfiddle.net/TmnPV/

徽标由“circle1”和相同html部分中的其他div标签组成。它也没有显示在jsfiddle上，并且在每个浏览器上看起来都不同。

在chrome =上显示全部 在firefox =没有徽标显示，输入字段下的底部文本较大 在safari =没有徽标显示

我该怎么办？

Answer 1

这就是所谓的，嗯......，欢迎狂野的狂野世界。每个浏览器供应商都以不同方式解析html / css / javascript。有些是宽松的，有些是严格的。 （Chrome与Opera合作）。有些人有不同的Box模型，有些人有标准的操作行为，有些人倾向于做自己的事情。（Opera Vs. IE6）
回答不同的效果图：你必须追捕每一个小怪癖。逐一。 欢迎。

Answer 2

如果您计划进行大量css3转换，则需要为旧浏览器调整样式。

IE 6,7和8只是没有能力阅读这些样式。

即使在Firefox上，根据版本的不同，您也会遇到各种间距问题，因为渲染引擎与Chrome（和Safari）不同。

对于在较旧的IE中使用html5和css3，您可以（谨慎地）使用polyfill，它使用javascript复制效果。您可以在此处查看可用的polyfill列表： https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

Quirksmode是检查兼容性的绝佳资源：http://www.quirksmode.org/compatibility.html

我强烈推荐Firefox的 Firebug 插件，以查看额外间距等发生的位置。

当您遇到特定浏览器的特定问题时，您无法在此处发布问题。与一般的浏览器问题相比，帮助解决一个bug要容易得多。

Answer 3

这主要是因为您使用代码来处理一个浏览器。不同的浏览器使用不同的代码渲染器。很难让一切看起来都一样，即使是Internet Explorer最差，其他浏览器也有不同的功能。 Opera拥有大多数HTML5表单功能，目前还没有其他浏览器支持，但Chrome和Firefox支持大多数HTML5属性。希望这有助于理解原因。