我有一个倾斜的下拉菜单，它也能正常工作，但在 Firefox 中，下拉菜单部分显示在主导航下方。我可以通过删除“display:table-cell”来修复它，但它会破坏其他属性并使导航无法正确缩放。 (为响应式网站设计)对 Firefox 修复有什么建议吗？
<html>
<head>
<meta content="text/html; charset=utf-8"
http-equiv="Content-Type" />
<title>test doc1</title>
<!-- hack for bug in Web Developer addon for Firefox. Used for
development and debugging only-->
<link rel="stylesheet"
type="text/css" href="x" />
<style type="text/css">
.menu_nav
{
position:relative;
}
nav ul {
display: table;
height: 2em;
list-style:none;
width:95%;
font-family:BentonSans, helvetica, verdana, sans-serif;
font-size:81.3%;
}
nav ul li {
color: white;
font-weight:bold;
display: table-cell;
height: 2em;
padding: 0 2em 0 2em;
-moz-transform: skew(25deg);
-o-transform: skew(25deg); /* Opera fails */
-webkit-transform: skew(25deg);
-ms-transform: skew(25deg);
transform: skew(25deg);
vertical-align:middle;
text-align: center;
border-left:.25px solid white;
position:relative;
background:#cc0000;
}
nav ul li a {
color: inherit;
display: block;
text-decoration: none;
-moz-transform: skew(-25deg);
-o-transform: skew(-25deg);
-webkit-transform: skew(-25deg);
-ms-transform: skew(-25deg);
transform: skew(-25deg);
padding:1em;
}
nav ul dl {
display:none;
-moz-transform: skew(-25deg);
-o-transform: skew(-25deg);
-webkit-transform: skew(-25deg);
-ms-transform: skew(-25deg);
transform: skew(-25deg);
float:left;
background:none repeat scroll #fff;
padding:0;
margin:0
}
nav ul li dl {position:absolute; left:-2em; background:none repeat scroll #fff; }
nav ul li dl a{display: block;}
nav ul dl li {
font-size:12px;
float:left;
color:#fff;
-moz-transform: skew(0deg);
-o-transform: skew(0deg);
-webkit-transform: skew(0deg);
-ms-transform: skew(0deg);
transform: skew(0deg);
width:100%;
height:37px;
background:#ddd;
padding:0;
margin-left:10px;
padding-left:10px;
}
nav ul dl li a {
width:100%;
color: inherit;
display: block;
text-decoration: none;
-moz-transform: skew(0deg);
-o-transform: skew(0deg);
-webkit-transform: skew(0deg);
-ms-transform: skew(0deg);
transform: skew(0deg);
color:#000;
float:left;
text-align:left;
padding:10px 0;
}
nav ul li:hover > dl {
display:block;
background:#ccc;
}
nav ul li dl li a:hover {
display:block;
background:#ccc;
}
</style>
</head>
<body>
<h1>Project</h1>
<nav>
<ul>
<li><a href="#"><span>ABOUT</span></a>
<dl>
<li class="menu_nav"><a href="#">HISTORY</a></li>
<li><a href="#">MISSION</a></li>
<li><a href="#">CONTACT</a></li>
</dl>
</li>
<li><a href="#"><span>COMMUNITY ENGAGEMENT</span></a>
<dl>
<li><a href="#">GOOD NEIGHBOR</a></li>
<li><a href="#">ACCESS TO SPORTS</a></li>
<li><a href="#">YOUTH EMPOWERMENT & LEADERSHIP</a></li>
<li><a href="#">VOLUNTEERISM</a></li>
</dl>
</li>
<li><a href="#"><span>STRATETIC INVESTMENTS</span></a>
<dl>
<li><a href="#">GOOD NEIGHBOR</a></li>
<li><a href="#">ACCESS TO SPORTS</a></li>
<li><a href="#">YOUTH EMPOWERMENT & LEADERSHIP</a></li>
<li><a href="#">VOLUNTEERISM</a></li>
</dl>
</li>
<li><a href="#"><span>CHARITABLE GIVING</span></a>
<dl>
<li><a href="#">GOOD NEIGHBOR</a></li>
<li><a href="#">ACCESS TO SPORTS</a></li>
<li><a href="#">YOUTH EMPOWERMENT & LEADERSHIP</a></li>
<li><a href="#">VOLUNTEERISM</a></li>
</dl>
</li>
<li><a href="#"><span>NEWS</span></a>
<dl>
<li><a href="#">GOOD NEIGHBOR</a></li>
<li><a href="#">ACCESS TO SPORTS</a></li>
<li><a href="#">YOUTH EMPOWERMENT & LEADERSHIP</a></li>
<li><a href="#">VOLUNTEERISM</a></li>
</dl>
</li>
<li><a href="#"><span>MULTIMEDIA</span></a>
<dl>
<li><a href="#">GOOD NEIGHBOR</a></li>
<li><a href="#">ACCESS TO SPORTS</a></li>
<li><a href="#">YOUTH EMPOWERMENT & LEADERSHIP</a></li>
<li><a href="#">VOLUNTEERISM</a></li>
</dl>
</li>
</ul>
</nav>
</body>
</html>
最佳答案
检查一下 http://jsfiddle.net/wNhD8/2/
我添加了 white-space: nowrap; 到 nav ul
display: inline-block; to nav ul li
margin-left:-5px; 到 nav ul li
从 nav ul li 中移除了白色边框
关于html - Firefox 中的下拉菜单中断 - 表格单元格出错？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22673864/