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

【问题标题】：CSS styling on DIV chrome ignoring the overflow hiddenDIV chrome上的CSS样式忽略隐藏的溢出
【发布时间】：2012-11-27 18:33:31
【问题描述】：

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

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

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

【问题讨论】：

欢迎来到 StackOverflow！请提供一些图片（上传到图片服务，有编辑权限的人会将它们添加到您的帖子中）以说明您的问题。一旦问题得到解决，该链接将不再用于理解问题。

标签： css google-chrome

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

这样做：

width:100%;
min-width:0;

【讨论】：

不幸的是，我正在尝试实现下拉箭头隐藏在图像后面的效果。

【解决方案3】：

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

【讨论】：