html - 不同浏览器的布局问题

我有一个网站，它与 FireFox(桌面版和安卓版)完全兼容。但是当我切换到另一个浏览器时，问题不断出现。查看我的主页:

header在firefox中放的很好，但是当你在chrome中打开页面时，header不在它的位置。所以我必须添加这个:

margin-top:-16px

enter image description here

但这会破坏 firefox 中的网站。我什至没有说该网站在 IE 中完全损坏。

另一个问题属于 Google+1 按钮。在 chrome 中不会显示，直到您按 F12 并打开检查元素，然后该按钮才会自行显示。

例如在这个页面中:

这会发生:

enter image description here

我在代码上工作了很长时间，以调查问题。但我在代码中找不到任何问题。

有没有其他人经历过这些？是否有代码或脚本可以解决这些问题？

最佳答案

我在 FF 中查看页面源代码时注意到的一件事是您有一个不正确的 script此处显示的标记(红色)，介于 head 之间和 body标签。

所以，我猜这就是您在 Chrome 中获得这种呈现布局的问题

Chrome

你所有的link和 script标签以某种方式进入 body , 你有 empty “分区”。我在检查器中删除该节点的那一刻，问题就消失了。所以，尝试删除 <script type="text/javascript"> ; </script>或将其移入 head .

关于html - 不同浏览器的布局问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25347699/