DIV chrome上的CSS样式忽略了隐藏的溢出

Question

我有一个宽度为200px且溢出设置为隐藏的div。在Firefox，Safari＆amp; IE选择服从样式规则并正确显示。但是在chrome中，select元素不遵循规则集并流过div。

该网站位于http://conaty.hailstormcommerce.com/index.php?route=product/category&path=20

这个问题与select元素的background属性有关。

Answer 1

众所周知，

SELECT表现得像这样。它的行为更像是OS中的控件而不是HTML中的元素（单选按钮和复选框也是如此）。您所能做的就是对宽度进行硬编码以防止其溢出。

Answer 2

除了Diodeus的回答，你还要在这个元素上指定最小宽度为220px。

这样做：

width:100%;
min-width:0;

Answer 3

我想你可能在你的问题中错误地描述了这个问题。

您似乎正在尝试为select元素创建自定义下拉箭头。 select元素是您设置的正确宽度，div会隐藏溢出。但是，在Chrome中，select的背景为白色，覆盖自定义箭头，不受background: transparent !important;声明的影响。

要解决此问题，以便自定义箭头显示，您只需添加-webkit-appearance: none;，如下所示：

.selectContainer select {
    background: transparent !important;
    cursor: pointer;
    -webkit-appearance: none; /* add this */
}