3

在此处输入图像描述我有一个宽度为 200 像素的 div，溢出设置为隐藏。在 Firefox、Safari 和 IE 中，选择遵循样式规则并正确显示。但是在 chrome 中，选择元素不遵循规则集并流过 div。

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

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

4

3 回答 3

0

除了 Diodeus 答案之外，您还为此元素指定了 220px 的最小宽度。

做这个：

width:100%;
min-width:0;
于 2012-11-27T18:57:41.363 回答
0

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

于 2012-11-27T18:37:32.200 回答
0

我认为您可能在问题中错误地描述了该问题。

select看起来您正在尝试为元素创建自定义下拉箭头。该select元素是您设置的正确宽度，并且溢出被 div 隐藏。但是，在 Chrome 中，它select有一个白色背景，覆盖了您的自定义箭头，并且不受您的background: transparent !important;声明的影响。

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

.selectContainer select {
    background: transparent !important;
    cursor: pointer;
    -webkit-appearance: none; /* add this */
}
于 2012-11-28T00:18:56.897 回答