在Firefox上选择框的右边框丢失了

Question

在Firefox上选择框的右边框丢失了

7

当我将具有118像素的宽度且父元素左侧有15像素的padding时才会发生这种情况！有人知道是怎么回事吗？

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
</head>
<body>
<div style="width: 1000px; padding-left: 15px;">
    <select style="width: 118px;">
        <option>a</option>
        <option>b</option>
        <option>c</option>
    </select>
</div>
</body>
</html>

结果如下：

这里有一个 plunker：点击

仅在 Windows 上的 Firefox 中发生。我在 40.0.2 版本上进行了测试。

- kubut

3

在我看来没问题。我在Win7中使用firefox v. 40.0.2，使用了你的plunker链接。 - DavidDomain

在Win 10上，使用最新版的Firefox，看起来没问题。 - Praveen Kumar Purushothaman

也许这取决于屏幕分辨率？我在1600x900上遇到了这个问题。当我调整浏览器窗口大小到某个尺寸时，选择看起来很好...但在1600x900上不行... - kubut

2

这个案例有一个关于错误的报告：https://bugzilla.mozilla.org/show_bug.cgi?id=924068 - Nameismy

有没有什么诀窍可以修复它？ - kubut

2个回答

-1

我们可以在选项上放置一个右边框，即 border-right:1px solid grey。这样我就不必对定义的宽度进行任何调整。输入图像描述。

或者，如果您愿意进行宽度调整，则可以将选择器的 CSS 宽度设置为自动，即 width:auto。

- Nupur Gupta

请查看如何在Stackoverflow上回答问题。 - Onic Team

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user4431269 · Accepted Answer

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

来源: https://dev59.com/Km435IYBdhLWcg3w7k2b#11390432 问题来源: https://bugzilla.mozilla.org/show_bug.cgi?id=924068

并且要善于使用谷歌!

编辑: (问题来源，解释)

在阅读了错误报告之后，我发现可能与窗口大小或分辨率有关。可以按照先前的说明修复该问题。