Question

我制作了带有几个下拉按钮的导航部分。我想用文本长度来设置div的宽度。根据Firefox中的结果，我认为我做得很好。（我想要的确切结果）

然而，在Chrome中检查网站时，整个导航部分的反应完全不同。文本正在分解，div宽度不再正确。但最奇怪的是，当我将鼠标悬停在按钮上时，div宽度会开始反应并更改为正确的设置。

这是Chrome的事吗，还是我需要以不同的方式制作我的代码？

我在父css文件中使用normalize.css。

HTML：

<nav>
  <ul>
       <li><a class="selected" href="index.html">Home</a></li>
       <li><a href="#">Onze diensten</a>
          <ul>
            <li><a href="schilderwerken.html">Schilderwerken</a></li>
            <li><a href="totaalwerken.html">Totaalwerken</a></li>
            <li><a href="andere.html">Andere werken</a></li>
          </ul>
        </li>
        <li><a href="#">Over ons</a></li>
        <li><a href="#">Contact</a></li>
   </ul>
</nav>

CSS：

nav{
    float:right;    
    padding-top:68px;
}

nav ul{
    position: relative;
    display: inline-table;
    width:100%;
}

nav ul:after {
        content: ""; clear: both; display: block;
}


nav li{
    float:left;
    list-style-type:none;
    margin-right:2%;
}

nav ul li a{
    display:block;
    width:auto;
    min-width:75px;
    text-align:center;
    background-color:#E9E9E9;
    color:#555555;
    padding:7px 13% 10px;
    border-radius:50px;
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size:16px;
    text-decoration:none;
}

nav li a:hover, .selected{
    background-color:#838383;
    color:white;
    text-decoration:none;
}

nav ul ul {
    display: none;
    border-radius: 0px; 
    padding: 0;
    position: absolute; 
    top: 35px;
    width:auto;
    margin-left:0%;
}

nav ul li:hover > ul {
    display: block;
}

nav ul ul li {
    float: none; 
    position: relative;
}
nav ul ul li a {
    color:#555555;
    background-color:#E9E9E9;
    margin-top:3px;
    width:auto;
}   
nav ul ul li a:hover {
    background: #838383;
    color:white;
    text-decoration:none;
}

Answer 1

在我的谷歌浏览器中，这有效：

jsfiddle＆lt; - 请参阅jsfiddle

看起来像padding中的nav ul li a{正在为你搞砸。

Answer 2

正如另一个答案所说，这里有13％的填充：

nav ul li a{
    display:block;
    width:auto;
    min-width:75px;
    text-align:center;
    background-color:#E9E9E9;
    color:#555555;
    padding:7px 13% 10px;
    border-radius:50px;
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size:16px;
    text-decoration:none;
}

与你搞砸了你把它改成px值你应该好好去：D

Div宽度制作＆＃34;特殊＆＃34;在Chrome中移动

2 个答案: