Firefox 与 Chrome 中的 HTML 页面呈现问题：Firefox 失败？答案

【问题标题】：HTML page render issue in Firefox vs. Chrome: Firefox fail?Firefox 与 Chrome 中的 HTML 页面呈现问题：Firefox 失败？
【发布时间】：2016-04-14 14:22:54
【问题描述】：

我很困惑，尝试使用 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

谁能告诉我我做错了什么？？

【问题讨论】：

标签： html css

【解决方案1】：

这个解决了问题：

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

【讨论】：