为什么我的网站在每个浏览器上看起来都不同？
请查看我网站的这个片段。
该徽标由 'circle1' 和其他 div 标签组成在相同的 html 部分中。它也不会出现在 jsfiddle 上，并且在每个浏览器上看起来都不同。
在 chrome 上 = 显示全部 在 Firefox 上 = 不显示徽标并且输入字段下的底部文本较大 在 safari 上 = 没有徽标显示
我能做什么？
Please check out this snippet of my site.
The logo is made up of the 'circle1' and other div tags in the same html sections. It doesn't show up on jsfiddle either and it looks different on every browser.
On chrome = shows all
On firefox = no logo shows and bottom text under input field is larger
On safari = no logo shows
What can I do?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这就是所谓的，嗯...，欢迎来到狂野的网络世界。每个浏览器供应商对 html/css/javascript 的解析方式都不同。有的宽松，有的严格。 （Chrome 与 Opera）。有些有不同的 Box 模型，有些有标准的操作行为，有些倾向于做自己的事情。（Opera Vs. IE6）
对不同渲染的回答：你必须找出每一个小怪癖。逐个。
欢迎。
This is called, umm... , welcome to wild wild world of web. Every browser vendor parses html/css/javascript differently. Some are lenient, some are strict. (Chrome Vs. Opera). Some have different Box model, some have standard operational behavior, some tend to do their own thing.(Opera Vs. IE6)
Answer to different renderings : You have to hunt down each and every little quirk. One by one.
Welcome.
如果您打算进行大量 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 插件来查看额外的间距等在哪里正在发生。
当您在使用特定浏览器时遇到无法解决的特定问题时，请在此处发布问题。帮助解决一个错误比解决一般的浏览器问题要容易得多。
You'll need to adjust your styles for older browsers if you plan on doing alot of css3 transforms.
IE 6, 7, and 8 just don't have the ability to read those styles.
Even on Firefox, depending on the version, you'll run into various spacing issues since the rendering engine is different than Chrome (and Safari).
For using html5 and css3 in older IEs you can (sparingly) use polyfills, which duplicate the effect using javascript. You can see a list of available polyfills here:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Quirksmode is a great resource for checking compatibility: http://www.quirksmode.org/compatibility.html
I would highly recommend the Firebug add-on for Firefox to see where the extra spacing, etc is happening.
When you run into a specific issue with a specific browser that you can't figure out post a question here. It's much easier to help with one bug than just general browser problems.
这主要是因为您使用代码来使用一种浏览器。不同的浏览器使用不同的代码渲染器。很难让所有内容看起来都一样，即使 Internet Explorer 是最差的，其他浏览器也有不同的功能。 Opera 拥有大部分 HTML5 表单功能，目前还没有其他浏览器支持，但 Chrome 和 Firefox 支持大部分 HTML5 属性。希望这有助于理解原因。
That's mostly because you are using code to work with one browser. Different browser uses different code renderer. It's hard to make everything look the same, even tho Internet explorer is the worst, other browsers have different features. Opera has most of the HTML5 form features, that no other browser supports so far, but Chrome and Firefox supports the most of the HTML5 attributes. Hope this helps understand the reason why.