Html 表单选择元素在Firefox中被不规则地切断_Html_Css_Firefox_Html Select

Html 表单选择元素在Firefox中被不规则地切断

html css firefox

Html 表单选择元素在Firefox中被不规则地切断,html,css,firefox,html-select,Html,Css,Firefox,Html Select,我在Firefox中看到一些关于表单选择字段的奇怪行为根据视口宽度的不同，例如宽度为33.333%的选择有时会切断其右边框请看这把小提琴的例子：我有一个绝对宽度的水平居中父容器，包含一个分数宽度的select，如下所示： .parent { margin: 0 auto; /* centered on viewports > 1200px */ width: 300px; } .select { width: 33.333%; } 简化标记： <body>

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

根据视口宽度的不同，例如宽度为

33.333%

的选择有时会切断其右边框

请看这把小提琴的例子：

我有一个绝对宽度的水平居中父容器，包含一个分数宽度的select，如下所示：

.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

）中，select的右边框被切断

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

此外，只有当

选项

比

选择

窄时，才会发生这种情况

我猜想，如果剩余的视口宽度是奇数，则会计算

边距：auto属性正在计算半像素并产生舍入错误
我似乎无法理解的是，父对象上的边距如何对其子对象产生任何影响，据我所知，子对象的分数宽度应始终基于父对象的绝对宽度300px

我是否遗漏了一些关于box模型的基本信息，或者这只是Firefox中的一个bug？对于这个问题，有一个我还没有找到的已知解决方法吗
在侧注中，框大小：边框框似乎对此行为没有任何影响。
此问题，有一个很好的解决方法：

我已经对它进行了一些研究，这似乎与您提供的代码配合使用。问题是设置大小容器，然后使截面仅为其宽度的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;

但不知何故，在你的情况下，这似乎并没有解决问题
我希望这会有帮助，安德鲁
使用flexbox
调整select
s的大小很容易解决这个问题
这是从firefox运行的屏幕截图

HTML
有关flexbox的更多信息
您可以尝试以下方法：
.select {
  width: calc(100%/3);
}

* {
    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; }

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