选择选项时选择元素的奇怪行为答案

【问题标题】：Strange behavior of select element when choosing options选择选项时选择元素的奇怪行为
【发布时间】：2013-05-08 00:49:36
【问题描述】：

通常，当您单击选择元素时，您选择的选项默认突出显示，当您滚动到其他选项时，突出显示会跟随指针。由于某种原因，我的所有选择都被破坏了，当您滚动到其他选项时，突出显示会跳回原来的选定选项，并且在您所在的元素下方的外部边缘可以看到一小部分突出显示。当您单击一个选项时，一切正常，并且即使突出显示在其他地方视觉上显示它也会被选中，但我无法弄清楚是什么导致它以这种方式行事。

问题图片：

在这个例子中，“人”是选定的选项，我将指针放在“俱乐部”上，因为你可以看到很难分辨你在选择什么。这在 Chrome 和 Firefox 中都发生了，在 IE 中，选择甚至根本不允许我选择不同的选项，一旦下拉菜单打开它就会再次关闭（选择您已经选择的内容）。

我已经浏览了几个小时试图找到修复程序，我发现的只是这个问题，它专门描述了 chrome 中的相同问题。 Very weird Chrome behavior in an open (focused) "select" element

不幸的是，这对我没有帮助，因为我根本没有在选择元素上使用任何 javascript（我将其删除是为了找出问题所在）。我还从默认选择和 ::selection 样式中删除了 selected="true"，因为它们与问题有某种关联。

这是损坏的选择之一（大部分 css 在下面，上面有解释）：

select
{
    font-family: 'CabinSemiBold'; 
    font-size: 14px;
    border-radius:3px; 
    border: 1px solid #000;
    color:#000000; 
}

#reviewsort
{
    width: 110px;
    height:30px;
}

<div class="sitecontentwrapper" >
    <div class="sitecontentrow">
        ...
        <div class="sitecontentcell">
             <div class="nowrap inlineblock">
             ....(omitted "Sort By: " label)...
             <select name="reviewsort" id="reviewsort" class="inlineblock">
                 <option value="date">Date</option>
                 <option value="helpful">Most Helpful</option>
             </select>
             </div>
        </div>
        ....
    </div>
</div>

使用自动边距包裹和居中的内容被设计为随着屏幕尺寸的变化而变化，因为它被视为在一张巨大的桌子内。 .inlineblock 和 .nowrap 用于区域不应该换行或在换行时必须保持在一起并且“单元格”中的其余内容根据需要延伸“行”高度的情况。我对响应式设计还很陌生，我确信有更好的方法来处理响应式内容转移，但这并不是问题的重点。我主要包括这个，以防它以某种方式导致问题，因为我已经尝试了我能想到的所有其他方法并且无法弄清楚选择是如何被破坏的。

.sitecontentwrapper
{
    max-width:1400px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 50px;
    position:relative;
    display:table;
    border:0px;
    height:100%;
    width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.sitecontentrow
{
    display:table-row;
}

.sitecontentcell
{
    display:table-cell;
    vertical-align: top;
}

.nowrap
{
    white-space: nowrap;
}

.inlineblock
{
    display:inline-block;
    vertical-align:top;
    position: relative;
}

谁能想出一个原因，为什么这会导致选择无法正常工作？或者为我指出解决问题的方法？

编辑：显然，我链接的问题中的小提琴示例对于某些人（不是我）在 chrome 中正常工作，因此我已将其删除作为视觉参考，以解释我的代码中发生的事情并附上图像。真的希望它有所帮助，因为这是一个非常奇怪的问题

编辑 2：我发现了问题并在下面添加了答案，以便我可以关闭问题。而不是在这里留下答案。

【问题讨论】：

您的小提琴在 Chrome 中按预期工作。
是的，你的小提琴和你的代码都适用于我，在 Chrome 中
奇怪的是，我删除了小提琴并使用具有更多选项的其他选择之一添加了行为图像，因此更清楚发生了什么。小提琴不是我的代码，但它显示的内容与我网站上的选择相同。
您使用的是哪个 Chrome 版本和操作系统？在带有 Chrome 版本 26.0.1410.64 m 的 Windows 8 上一切正常，使用 jsFiddle 和您的代码。
查看您的 CSS 时我唯一能想到的可能是 display: inline-block 和 vertical-align: top 的组合以及在包含元素上设置的 white-space: nowrap 以某种方式应用于选项内的选项元素选择。由于这里不会发生这种情况，因此您要么有另一个带有错误 Chrome 版本的环境，要么有一些额外的代码/CSS 尚未出现在您的帖子或 jsFiddle 中。你碰巧用过reset stylesheets吗？或者你有任何全局 CSS 规则* { } 将样式应用于所有元素？

标签： html css

【解决方案1】：

发现问题显然是由于在全局包装器中有一个杂散的 display:table 标记，该标记最初是为了使绝对定位正常工作，因为内容是相对定位的，z 索引用于制作菜单和像正确地覆盖它们下方的内容。所以显然它正在做一个绝对表格显示，然后在相对级别（使用 z-indexes）再次显示表格，导致选择中断。它还告诉我，我可能需要回去改变一些事情的完成方式，因为我很确定我不应该首先拥有这个包装器，但是当我把它拿出来时，它会破坏 jquery 评级导致星要在整个位置插入而不是连续插入的图像。我的专长是后端和数据库工作，所以我在进行大量阅读和浏览 stackoverflow 的过程中会弄清楚一些事情，因为我不习惯做所有的 CSS 工作，并且正在努力跟上最新的进度/ 最佳实践（例如响应式）。

希望这有助于防止其他人重蹈覆辙。非常感谢所有发表评论的人，因为它确实有助于缩小问题所在。

.sitewrapper
{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    position:absolute;
    top:0px;
    left:0px;
    border:0px;
    <display:table> <- stray tag that needed to be removed
}

【讨论】：