Question

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

问题图片：

enter image description here

在这个例子中，“people”是选中的选项，我指的是“club”，因为你可以看到它很难分辨出你在选择什么。这种情况发生在Chrome和Firefox中，在IE中，选择甚至根本不会让我选择不同的选项，只要下拉菜单打开它就会再次关闭（选择你已经选择的内容）。

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

不幸的是，这对我没有帮助，因为我根本没有在选择元素上使用任何javascript（我将其删除作为试图找出问题所在的一部分）。我还从默认选择和::选择样式中删除了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：我发现了问题，并在下面添加了答案，因此我可以关闭这个问题。而不只是在这里留下答案。

Answer 1

在那个被放在最初做绝对定位正常工作的内容相对定位和Z指标是用来做菜单和一个全球性的包装表标签：发现这显然是因为有一只流浪显示这正在导致问题的原因

喜欢正确覆盖它们下面的内容。所以显然它正在进行绝对表格显示，然后再次在相对级别（使用z索引）显示表格，导致选择中断。它也告诉我，我可能需要回去和改变，因为我敢肯定我不应该需要有这样的包装在首位的几件事情完成的方式，但我把它拿出来时，它打破造成明星的jQuery评级图像要插入到整个地方而不是连续。我的专业是后台和数据库的工作，所以我有点盘算的事情了，因为我根据大量的阅读和计算器的浏览，因为我不习惯这样做所有的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
}

选择选项时select元素的奇怪行为

1 个答案: