我很困惑,尝试使用 HTML5/CSS3 构建菜单,以找到 Chrome/IE/Safari 显示页面和 Firefox 之间的实质性差异。有人可以暗示可能会发生什么吗?

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Formatting words and paragraphs</title>
  <link rel="stylesheet" href="css/wordplay.css" type="text/css" media="screen" />
</head>
<body>

<div class="nav">
<ul>
<li><div class="menu_item">Forth</div></li>
<li><div class="menu_item">grass</div></li>
<li><div class="menu_item">have</div></li>
<li><div class="menu_item">you'll</div></li>
<li><div class="menu_item">subdue</div></li>
<li><div class="menu_item">brought</div></li>
<li><div class="menu_item">called</div></li>
<li><div class="menu_item">dominion</div></li>
<li><div class="menu_item">form</div></li>
<li><div class="menu_item">above</div></li>
</ul>
</div>

<section>

</section>

</body>
</html>

CSS:
* { margin: 0; padding: 0 }

body { font-family: Tahoma, sans-serif; font-size: 12px; font-style: normal; font-weight: normal }

.big_word { font-size: 1.5rem; border: 1px solid lightgray }

.nav { display: block; background-color: #1d3644; min-height: 39px }

.nav ul { list-style: none }

.nav ul li { display: block; float: left }
.nav::after { content: ''; display: block; clear: both }

.nav ul li::after {
  content: ' '; height: 25px; display: block; float: left; width: 1px;
  border-right: 1px solid gray;
  margin: -27px 0 0 100%;
}
.nav ul li div.menu_item {
  color: #b6d9ec; font-size: 17px;
  text-align: center; line-height: 1.7rem;
  height: 29px;
  padding: 0 15px;
  margin: 5px 2px 0 5px;
  /*border: 1px solid #587e93;*/
}

.nav ul li div.menu_item:hover { background-color: #59a8d0; border-bottom-left-radius: 3px; border-top-right-radius: 3px; color: #381b51 }

section { height: 400px; background-color: #587e93 }

这会在 Chrome/IE/Safari 中产生什么结果:

The menu is formatted horizontally as a normal menu would be

在 Firefox 中:

The menu is formatted vertically, each menu item takes the whole width

有人能告诉我我做错了什么吗??

最佳答案

这个解决了这个问题:

.nav ul li::after {
  content: ' '; height: 25px; display: block; float: left; width: 1px;
  border-right: 1px solid gray;
  margin: -27px 0 0 0;
}

关于Firefox 与 Chrome 中的 HTML 页面渲染问题 : Firefox fail?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36615059/

10-12 12:26
查看更多