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

通常，当您单击select元素时，默认突出显示您选择的选项，并且当您滚动到其他选项时，高亮显示在指针后面。出于某种原因，我所有的选择都被打破了，当您滚动到其他选项时，高亮会跳回到原始选定选项，并且在外边距上的元素下方会看到一点高光。当你点击某个选项时，通常情况下它会正常工作，即使高亮显示在其他位置，但它仍会被选中，但我无法弄清楚是什么导致它以这种方式进行操作。选择元素时选择元素的奇怪行为

的问题图片：

enter image description here

在这个例子中“人”是所选择的选项，我有指针移到“俱乐部”，你可以看到它很难告诉你是什么选择。 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; 
}

任何人都可以拿出一个理由，为什么这会导致选择不能正常工作？或者指出一个方法来解决这个问题？

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

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

来源

2013-05-05 Wandering Coder

您的小提琴在我的Chrome中按预期工作。 – cbp 2013-05-05 23:40:25

是的，你的小提琴和你的代码都适合我，在Chrome – Tyblitz 2013-05-06 04:20:49

奇怪的是，我删除了小提琴，并使用其他选择之一添加了一个行为的图像，因此它更清晰地发生了什么。小提琴不是我的代码，但它显示与我的网站上的选择相同。 – 2013-05-06 04:55:57

发现问题很明显，这是由于存在杂散显示而引起的：在最初放入的全局包装器中的表标签，以使内容相对定位时绝对定位正常工作，z索引用于制作菜单和就像在他们下面叠加内容一样。所以显然它是在做一个绝对的表格显示，然后在相对的层次上再次显示表格（使用z-indexes）导致选择中断。它也告诉我，我可能需要回去改变做几件事情的方式，因为我非常确定，我不应该首先拥有这个包装，但当我把它拿出来时，它会打破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 
}

来源

2013-05-07 16:39:44

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

回答

相关问题