css - 在 optgroup 标签上使用::before css 选择器时出现浏览器兼容性问题

Question

以下代码仅在 Chrome 上获得所需的结果:

HTML:

<select multiple style="width:500px">
  <optgroup class="outg" label="Swedish Cars">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </optgroup>
</select>

CSS:

.outg::before {
  content: "";
  border-style: solid;
  border-width: 7px 0 7px 7px;
  border-color: transparent transparent transparent #656565;
  float: left;
  margin-right: 3px;
  width: 10px;
}

https://jsfiddle.net/2ny35p94/3/

---

Chrome 58 - 同时显示三 Angular 形和标签:

Firefox 53 - 只显示三 Angular 形:

IE 11 - 仅显示标签:

---

关于如何使其跨浏览器兼容有什么建议吗？

Answer 1

您不能同时显示两者，因为您覆盖了默认值 ::before ，这正是浏览器所做的。 Chrome 似乎应用了它，但它不在标准规范中。因此，在这种情况下，Firefox 和 IE 可以正常工作。

<optgroup>标记由浏览器设置为这样的样式:

optgroup[label]::before {
     content: attr(label);
}

如果您覆盖 content属性(property)，你无能为力。

我的建议是删除 content属性在您的代码上，但您将不得不修复其他相关问题。看截图:

看到它工作:

https://jsfiddle.net/2ny35p94/4/