我为我帮助开发的网站编写了一个 CSS 菜单，它在 IE 7 和 Firefox 3(在 Windows XP 上)中都能正确显示。
预期的效果是下拉菜单的宽度应与其中最宽的元素一样宽(但不能更宽)。然而，在 Safari 中，它们看起来大约是应有宽度的两倍。我不知道如何解决这个问题。有帮助吗？
HTML 是:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<div id="mainContainer">
<div id="mainNavContainer">
<img id="leftNavImg" src="imgsrc.jpg" alt="ignore me for now" height="34" width="91">
<div id="topNav">
<ul>
<li><a href="#">Menu Item 1</a><ul>
<li><a href="#">Submenu Item 1.1</a></li>
<li><a href="#">Submenu Item 1.2</a></li>
<li><a href="#">Submenu Item 1.3</a></li>
</ul></li>
<li><a href="#">Menu Item 2</a><ul>
<li><a href="#">Submenu Item 2.1</a></li>
<li><a href="#">Submenu Item 2.2</a></li>
<li><a href="#">Submenu Item 2.3</a></li>
</ul></li>
<li><a href="#">Menu Item 3</a><ul>
<li><a href="#">Submenu Items may have different lengths</a></li>
<li><a href="#">short</a></li>
<li><a href="#">or potentially moderately long</a></li>
<li><a href="#">The submenu should be as wide as its longest item</a></li>
</ul></li>
<li><a href="#">etc...</a><ul>
<li><a href="#">Submenu Item 4.1</a></li>
<li><a href="#">Submenu Item 4.2</a></li>
<li><a href="#">Submenu Item 4.3</a></li>
</ul></li>
</ul>
</div>
</div>
</div>
</body>
CSS 是
* {
margin: 0;
padding: 0;
}
ul, ol, dl, li, dt, dd {
list-style: none;
}
body {
background-color: #fff;
margin: 20px;
text-align: center;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
#mainContainer {
width: 975px;
background-color: #fff;
text-align: left;
margin: 0 auto;
position: relative;
padding-top: 52px;
}
#mainNavContainer {
height: 34px;
font-size: 11px;
width: 973px;
border: 1px solid #dedede;
background-color: #888;
position: absolute;
top: 0;
color: #000;
}
#mainNavContainer #leftNavImg {
padding: 0 20px 0 7px;
float:left;
border-right:1px solid #dedede;
}
#topNav {
float: left;
}
#topNav ul {
display: inline;
text-align: center;
}
#topNav li {
display: block;
float: left;
position: relative;
border-right: 1px solid #DEDEDE;
width: 102px;
}
#topNav li ul {
display:none;
border-bottom: 4px solid #422952;
position:absolute;
top: 35px;
left:0px;
width: auto;
white-space: nowrap;
text-align: left;
z-index:100;
}
#topNav li li {
display:block;
border-right: none;
border-bottom: 2px solid #622952;
background-color:#FBFBFB;
width: 100%;
font-size: 12px;
}
#topNav li a, #topNav form {
text-decoration: none;
display:block;
color: #000;
padding: 11px 6px;
}
#topNav li li a {
padding: 9px 6px;
color: #666;
width: 100%;
}
#topNav a:hover {
color: #fff;
background-color: #824972;
}
#topNav li:hover ul {
display:block;
z-index:100;
}
#topNav li li a:hover {
background-image:none;
background-color:#fff;
color: #000;
}
最佳答案
移动
white-space: nowrap;
来自
#topNav li ul { ...
到
#topNav li li a { ...
干杯!
关于html - CSS 菜单在 Safari 中显示不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/916297/