Question

在Firefox中，ul元素的呈现方式与Chrome和Safari中的呈现方式不同。我的网站是Double Enders，我所指的ul元素构成了顶级菜单（在1000px宽以上的设备中）。如您所见，在Firefox中，菜单上方有额外的空间，导致页面的整个中间部分下拉。其他浏览器没有这样的问题。

如果我在ul的父div上放置overflow：auto然后使用position：relative和top：-20px，一切都在FF中正确对齐，但在其他浏览器中没有。

如何让菜单在浏览器中一致呈现？是什么导致这个问题？

Answer 1

某些浏览器具有不同的样式; Chrome，Safari，Firefox，Internet Explorer，Opera和其他浏览器都可以以不同方式呈现内容。查看this answer，它使用CSS重置进行探索（本例中为Normalize.css）。它消除了这些微妙的差异，因此您可以在一个浏览器上进行开发，并确信您的网站在其他浏览器上看起来一样。

Answer 2

您不会在中间栏的菜单中清除浮动。像这样清除它们：

ul.menu::before, ul.menu::after {
    content: "\0020";
    display: table;
    clear: both
}

然后不为ul添加余量

ul.menu {
   margin-top: 0
}

它很好地排列了你的列。

Answer 3

我已经在我的CSS中包含了适用于webkit的浏览器前缀，但我实际上并没有使用CSS。所以，虽然我有

ul {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-padding-start: 0;
}

消除了Safari和Chrome上ul的上下边距，我没有调整FF上的余量。添加

margin: 0;
padding: 0;

解决了眼前的问题。

如果我刚刚开始这个项目，hhoburg的回答将是一个有用的方法。

Firefox中的UL元素呈现方式不同

3 个答案: