下拉框未完全显示（所有浏览器）

Question

这将是我的问题，我有一个没有完全显示的下拉菜单。我不知道哪里可以开始，所以这里的HTML是下降的，我也会提供CSS。

HTML

<div id="add_item">
 <ul class="vert">
  <li>
   <ul class="horz">
    <li class="name">
     <select style="width: 195px; padding: 0px; margin: 0px;" disabled="disabled">
      <option value=""></option>
      <option value="0">0</option>
     </select>

    </li>
    <li class="quantity">
     <select style="width: 50px; padding: 0px; margin: 0px;" disabled="disabled">
      <option value=""></option>
      <option value="0">0</option>
     </select>
    </li>
   </ul>

  </li>
 </ul>
</div>

代码将下拉列为禁用的原因是因为它是动态的，周围的HTML是相同的，除了有可供选择和不再被禁用的选项。

CSS

div#byitem ul.horz li.name {
background:transparent none repeat scroll 0 0;
display:block;
font-size:11px;
font-weight:bold;
width:195px;
}

div#byitem ul.horz {
background:transparent none repeat scroll 0 0;
clear:left;
list-style-type:none;
margin:0;
padding:0;
}

div#byitem ul.vert li {
background:transparent none repeat scroll 0 0;
height:14px;
margin:0;
padding:0;
}

div#byitem ul.vert {
background:transparent none repeat scroll 0 0;
list-style-type:none;
margin:0;
padding:0;
width:540px;
}

element.style {
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0;
padding-bottom:0;
padding-left:0;
padding-right:0;
padding-top:0;
width:195px;
}
#content form select {
margin:0 0 4px 4px;
z-index:1;
}
html, body, div, p, form, input, select, textarea, fieldset {
-x-system-font:none;
color:#333333;
font-family:Arial,Helvetica,Verdana,sans-serif;
font-size:11px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:15px;
}
* {
margin:0;
padding:0;
}

感谢您的任何建议。

修改

我已经为包含下拉列表的div添加了CSS。同时更改行高并没有什么区别。两个下拉（项目和数量）之间的唯一区别是宽度。更改项目的宽度没有什么区别。

取出添加另一个项目链接，因为怀疑这是一个没有变化的问题。此外，我正在Firefox中进行开发我刚刚发布了Safari的截图。

Answer 1

看起来你正在设置“line-height：15px;”在“选择”元素。删除它，看看它是否解决了这个问题。

Answer 2

如果元素上的样式对于相同的类型（宽度除外）都相同，那么似乎唯一可能的罪魁祸首就是页面中的周围元素。例如，在有问题的下拉列表下面的“添加另一个项目”链接的css / html是什么？

Answer 3

我建议您使用Firefox中的Firebug插件检查您的网页。它可以显示和更改分配给元素的CSS样式，您将立即解决问题。

Answer 4

它可能不是DDL，但页面上的其他内容可能会覆盖其中的一部分。在FireFox中，在DDL底部的空白处尝试“检查元素”。

Answer 5

下拉列表可能没有差异;但是，根据您提供的代码，包含它们的LI存在差异。

您为所有列表项设置了基本样式，但您还为li.name定义了特定样式。我会专注于div#byitem ul.horz li.name风格。我没有足够的代码在本地重现它，但我的猜测是display: block是罪魁祸首。

Answer 6

Jeromy是正确的，区别在于包含选择的li和周围的元素，考虑到你正在浮动li。

尝试更改以下样式的高度，查看结果。

div#byitem ul.vert li {
    background:transparent none repeat scroll 0 0;
    height:17px;
    margin:0;
    padding:0;
}

希望这可以帮助您追踪它。

Answer 7

即使它最终没有解决问题，我强烈建议您从height:和li元素中删除select声明。显示大小取决于浏览器使用的字体。由于无法控制用户计算机上安装的字体，因此无法保证浏览器将使用哪种字体。这些高度迟早会引起你的问题（可能是你当前问题的原因）。