表单选择元素在Firefox中不正常地被截断
ant*_*nin 9 html css firefox html-select
我在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中看到了这一点.其他浏览器供应商似乎没有受到影响.
而且,只有当options比s更窄时才会发生这种情况select.
我猜测会发生的情况是,如果左侧视口宽度是奇数,则margin: auto;属性的某些计算会计算半像素并产生舍入误差.
我似乎无法理解的是,父母的边缘如何对其子节点产生任何影响,根据我的理解,它的小数宽度应该始终根据父节点的绝对宽度来计算300px.
我在这里遗漏了关于盒子模型的一些基本信息,或者这只是Firefox中的一个错误？这个问题有一个已知的解决方法,我还没有挖出来吗？
在旁注中,box-sizing: border-box;似乎对此行为没有任何影响.
这个问题已经报告给 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;
但不知何故，在你的情况下，这似乎并没有解决问题。
我希望它有帮助，安德鲁
| 归档时间： |
|
| 查看次数： |
838 次 |
| 最近记录： |