<分区>
标签 css google-chrome
<分区>
我有一段这样的 HTML http://jsfiddle.net/Ca28Y/
HTML
<ul class="searchitems">
<li class="filis">Build
<div class="fidivs"><div class="form-item form-type-select form-item-build">
<select id="edit-build" name="build" class="form-select"><option value="All" selected="selected">- Any -</option><option value="Slim">Slim</option><option value="Medium">Medium</option><option value="Heavy">Heavy</option></select>
</div>
</div>
</li>
<li class="filis">Complexion
<div class="fidivs"><div class="form-item form-type-select form-item-complexion">
<select id="edit-complexion" name="complexion" class="form-select"><option value="All" selected="selected">- Any -</option><option value="Light (PaleWhite or Freckled)">Light (PaleWhite or Freckled)</option><option value="Fair (White to Mediterannean)">Fair (White to Mediterannean)</option><option value="Olive (Tanned to Light Brown)">Olive (Tanned to Light Brown)</option><option value="Brown">Brown</option><option value="Dark (Dark Brown to Black)">Dark (Dark Brown to Black)</option></select>
</div>
</div>
</li>
</ul>
CSS
.searchitems li {
background: url("../images/search_play_g.png") no-repeat scroll 170px 7px rgba(0, 0, 0, 0);
color: #373E44;
font-size: 12px;
font-weight: bold;
height: 15px;
list-style: none outside none;
padding: 10px 15px;
position: relative;
text-transform: uppercase;
}
.searchitems li a {
display: block;
}
#userleftmenu li {
background: url("../images/search_play_g.png") no-repeat scroll 203px 5px rgba(0, 0, 0, 0) !important;
}
.searchitems li:hover {
background: none no-repeat scroll 159px 7px rgba(0, 0, 0, 0);
}
.searchitems li.filis .fidivs {
background: none repeat scroll 0 0 #78BB32;
border-radius: 3px;
display: none;
left: 200px;
min-height: 60px;
min-width: 210px;
padding: 5px;
position: absolute;
top: 0;
}
.searchitems li:hover {
background-color: #78BB32;
color: #FFFFFF;
}
.searchitems label {
color: #FFFFFF;
font-size: 13px;
}
.searchitems li:hover .fidivs {
display: table !important;
left: 200px;
top: -1px;
z-index: 9;
}
当我将鼠标悬停在左侧菜单时，会弹出一个 div，我们可以看到选择框。 在 chrome 中我无法点击选择框。 它在 Firefox 中运行良好，问题仅在 chrome 中。 可能是什么原因？
最佳答案
尝试将 min-height: auto 和 margin-top: 2px 设置为 .searchitems li.filis .fidivs {} 并起作用在 Chrome、Safari 和 Firefox 中正常。
.searchitems li.filis .fidivs {
background: none repeat scroll 0 0 #78BB32;
border-radius: 3px;
display: none;
left: 200px;
min-height: auto; // set this
margin-top: 2px; // add this
min-width: 210px;
padding: 5px;
position: absolute;
top: 0;
}
关于CSS Chrome 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20373347/