0

My website appears different in firefox compared to chrome or safari, the logo image at the top of the page is placed higher towards the top of the page.

I have tried using vertical-align but had no luck. Any suggestions? (page is institute101.com)

header .logo img.standard {
display: none;
vertical-align: middle;
}

The page is even more messed up in IE, is there a general rule I should keep in mind when making a page compatible for all browsers?

4

2 回答 2

3

body布局的差异是因为 Firefox 不支持元素上的 30px 填充。Firefox 似乎忽略了这一点。

问题很可能是可怕的怪癖模式。

如果站点没有以有效的 Doctype 开头，许多浏览器会将页面置于 quirks 模式。quirks 模式的问题在于它在不同的浏览器中的工作方式不同。

你的页面确实有一个 doctype，但重要的是，它不是页面中的第一个东西，这就是它进入怪癖模式的原因——你前面有一些流氓 CSS 和 javascript 标签；这些需要移动到<head>您页面的部分。

就IE而言，解决这个问题肯定会解决问题。它可能会解决 Firefox 的问题。

希望有帮助。

于 2013-09-08T21:24:16.543 回答
1

问题来自这个css文件：

该文件的最后一行是：

body { margin:0; padding:30px 0 0; }

如果您删除填充，您将拥有与 Firefox 相同的外观。

于 2013-09-08T21:11:52.490 回答