我使用 optgroup 创建了选择框,在开发过程中,我看到在 Chrome 中,optgroup 向右移动了 1px,但在 Firefox 中显示良好。
这是我的代码
HTML
<div class="col-xs-6" id="test">
<select aria-invalid="false" class="form-control" multiple="multiple" size="6">
<option value="120">Option 1</option>
<option value="122">Option 2</option>
<optgroup label="Optgroup 1">
<option value="201">Option 1</option>
<option value="202">Option 2</option>
</optgroup>
<optgroup label="Optgroup 2">
<option value="328">Option 1</option>
<option value="329">Option 2</option>
<option value="330">Option 3</option>
</optgroup>
</select>
</div>
和CSS:
#test select {
padding: 0;
height: 200px;
}
#test select option,
#test select optgroup {
padding: 7px;
}
#test select optgroup > option {
margin: 0 -7px;
}
和 JSFiddle: https://jsfiddle.net/5uaz59qz/
那么,如何在 Chrome 中修复它?
您将在 Chrome 中看到什么:
还有 Firefox(我不知道为什么 optgroup 的 child 不像 Chrome 那样移动):
最佳答案
它看起来像 :before
伪类。
option:before{
display: none;
}
#test select {
padding: 0;
height: 200px;
}
#test select option,
#test select optgroup {
padding: 7px;
}
#test select optgroup > option {
margin: 0 -7px;
}
option:before{
display: none;
}
<div class="col-xs-6" id="test">
<select aria-invalid="false" class="form-control" multiple="multiple" size="6">
<option value="120">Option 1</option>
<option value="122">Option 2</option>
<optgroup label="Optgroup 1">
<option value="201">Option 1</option>
<option value="202">Option 2</option>
</optgroup>
<optgroup label="Optgroup 2">
<option value="328">Option 1</option>
<option value="329">Option 2</option>
<option value="330">Option 3</option>
</optgroup>
</select>
</div>
关于html - Optgroup 在 Chrome 中有点向右移动,但在 Firefox 中显示正常,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35891904/