Question

当我将select放入div并使用width和padding-left时，我的选项右边没有边框。更重要的是，只有当select选择宽度为118px且父级有15px的填充时，它才会发生！有人有想法，发生了什么事？

我的简单代码：

<!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>

结果：

这是一个掠夺者：click

它只发生在Windows上的firefox上。我在40.0.2版本上测试了它

Answer 1

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

来源：https://stackoverflow.com/a/11390432/4431269 问题来源：https://bugzilla.mozilla.org/show_bug.cgi?id=924068

并善用GOOGLE！

编辑（问题来源，解释）

阅读bug报告后，我读到它可能与widows.size或解决方案有关。问题可以解决，如前所述。

Answer 2

我们可以在选项上放置一个右边界，即 border-right：1px solid gray 。这样我就不必对定义的宽度进行任何调整。enter image description here

或者如果你可以进行宽度调整，那么可以将select的宽度设置为auto，即。的宽度：自动

Firefox上的select中缺少border-right

2 个答案: