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

我用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的子代不会像在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>

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