Question

我在Firefox中看到了一些关于表单选择字段的奇怪行为。

根据视口宽度，宽度为33.333%的选项有时会切除其右边框。

请看一下这个小提琴的例子：http://jsfiddle.net/pjv0adhw/

我所拥有的是具有绝对宽度的水平居中的父容器，其中包含一个具有小数宽度的选择，如下所示：

.parent {
  margin: 0 auto; /* centered on viewports > 1200px */
  width: 300px;
}
.select {
  width: 33.333%;
}

简化标记：

<body>
  <div class="parent">
    <select class="select">
      <option>cat</option>
      <option>dog</option>
      <option>manatee</option>
    </select>
  </div>
</body>

现在，在Firefox上，当视口宽度大于300px并且.parent元素居中时，select开始表现得很奇怪。

在偶数视口宽度（302px，1326px）中，一切都很好。但在奇数视口宽度（301px，1317px）中，选择的右边框正在被切断。

我在Firefox 32-35中看到了这一点。其他浏览器供应商似乎没有受到影响。

此外，仅当option s比select更窄时才会发生这种情况。

我猜测会发生的情况是，如果左侧视口宽度为奇数，则margin: auto;属性的某些计算会计算半像素并产生舍入误差。

我似乎无法理解的是父母的边距如何对其子女产生任何影响，根据我的理解，其分数宽度应始终根据父亲的绝对宽度{{ 1}}。

我是否遗漏了关于盒子模型的基本信息，或者这只是Firefox中的一个错误？我还没有找到解决这个问题的已知方法吗？

在旁注中，300px似乎对此行为没有任何影响。

Answer 1

DEMO

使用flexbox调整select

的大小可轻松解决此问题

这是从firefox运行的屏幕截图

HTML

<div>
    <select class='flex-1'>
        <option>abc</option>
        <option>def</option>
    </select>
    <select class='flex-2'>
        <option>cat</option>
        <option>dog</option>
        <option>manatee</option>
    </select>
    <span class='flex-3'></span>
</div>

CSS

* {
    margin: 0;
    outline: 0;
    padding: 0;
}
div{
    margin: 5em auto;
    padding: 1em;
    width: 300px;
    background-color: slategray;
    display: flex;
}
[class*='flex']{
  flex-basis: 0;
}
.flex-1{ flex-grow: 1; }
.flex-2{ flex-grow: 2; }
.flex-3{ flex-grow: 3; }

有关flexbox here

的更多信息

Answer 2

此问题has been reported to firefox，并且有一个很好的解决方法：

http://jsfiddle.net/pjv0adhw/10/

我玩了一下，这似乎与您提供的代码一起使用。问题是设置一个大小容器，然后使该部分的宽度只有99.99％。像这样：

.sizing-container { width: *desiredwidth*; }
.sizing-container section { width: 99.99%; }

我还试图实现这一点特定于浏览器的代码：

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

但不管怎样，在你的情况下，这似乎并没有解决问题。

我希望它有所帮助，安德鲁

Answer 3

你可以试试这个：

.select {
  width: calc(100%/3);
}

表单选择元素在Firefox中不正常地被截断

3 个答案: