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