css - 在 Firefox、Internet Explorer 和 Safari 中的不同定位？

Question

我相信这个问题已经被问过很多次了，而且在它出现之前我已经设法克服了这个问题。就在现在，我觉得被它困住了，找不到合适的解决方案来让它在所有浏览器中工作:它只在 Firefox 中工作正常，而在 IE 和 Safari 中，它的元素在某种程度上彼此分开。你可以在这里看到结果: http://img813.imageshack.us/img813/8393/firefox.png http://img812.imageshack.us/img812/8041/10990669.png

这是我使用的代码: http://pastebin.com/n6KEjazp

非常感谢您!

Answer 1

除了 padding 拼写错误(无效的 CSS)之外，其他浏览器计算单元格高度的方式也不同。在 IE 中，高度被添加到填充中。

改变这个:

  .top_menu {
      background-image: url(images/header.png);
      background-repeat: no-repeat;
      height: 155px;
      font-family: LilyUPC;
      padding-left: 184px;
      padding-top: 120px;
  }

对此:

  .top_menu {
      background-image: url(images/header.png);
      background-repeat: no-repeat;
      font-family: LilyUPC;
      padding: 120px 0 1em 184px;
  }