【问题标题】：Drop Down Box Not Fully Displayed (All Browsers)下拉框未完全显示（所有浏览器）
【发布时间】：2010-09-27 09:09:00
【问题描述】：

这将是我的问题，我有一个未完全显示的下拉菜单。我什至不确定从哪里开始，所以这里是下拉列表周围的 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。更改行高也没有什么区别。两个下拉菜单（项目和数量）之间的唯一区别是宽度。更改 Item 的宽度并没有什么不同。

删除了添加另一个项目链接，因为这被怀疑是一个问题，没有变化。我也在 Firefox 中进行开发，我刚刚发布了 Safari 的屏幕截图。

【问题讨论】：

我认为这里没有足够的信息来提供解决方案。使用您提供的代码不会呈现任何问题，如所述的问题。除非有人以前完全见过这种情况，否则我们至少需要有足够的代码来复制问题才能诊断它。
我同意，看起来提供的样式并不是此页面上使用的所有样式。你有更多可以提交的代码吗？
我仍然认为缺少代码 - css 引用了不存在的标记
我只是更改了一些 div 名称并添加了 1 来包围它。我让它以这种方式工作（有点）。我的答案如下。

标签： css drop-down-menu

【解决方案1】：

看起来您正在设置“line-height:15px;”关于“选择”元素。删除它，看看它是否能解决问题。

【讨论】：

【解决方案2】：

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

【讨论】：

边距：0px；填充：10px 0pt 0pt 10px；文本对齐：左；显示：无；
糟糕的是，页面最初加载时显示没有。

【解决方案3】：

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

【讨论】：

尝试改变周围元素的 CSS。特别是，尝试在其中一些上设置 display: none 以查看工件是否在他们不在时消失。对不起，如果我用这个“周围元素”的东西打败了一匹死马。 :)

【解决方案4】：

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

【讨论】：

【解决方案5】：

下拉菜单可能没有区别；但是，根据您提供的代码，包含它们的 LIs 存在差异。

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

【讨论】：

【解决方案6】：

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

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

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

希望这可以帮助您找到它。

【讨论】：

【解决方案7】：

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

【讨论】：