html - 选择选项时选择元素的奇怪行为

Question

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

问题图片:

在这个例子中，“people”是被选中的选项，我将指针指向“clubs”，因为你可以看到很难说出你选择的是什么。这在 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;
}

谁能想出其中任何一个会导致选择无法正常工作的原因？或者为我指出解决该行为的方法？

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

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

Answer 1

发现这个问题显然是因为在全局包装器中有一个杂散的 display:table 标记，该标记最初是为了使绝对定位正常工作，因为内容是相对定位的，z 索引用于制作菜单和喜欢在它们下面正确覆盖内容。很明显，它是在进行绝对表显示，然后在相对级别(使用 z 索引)上再次显示表，导致选择中断。它还告诉我，我可能需要回去改变一些事情的完成方式，因为我很确定我一开始不需要这个包装器，但是当我把它拿出来时，它会破坏 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
}