html - Optgroup 在 Chrome 中有点向右移动，但在 Firefox 中显示正常

Question

我使用 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 那样移动):

Answer 1

它看起来像 :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>

https://jsfiddle.net/afelixj/5uaz59qz/1/