2017-06-05 182 views
2

以下代码获取仅在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/


铬58 - 两个三角形和标签被显示:

火狐53 - 只显示三角形:

IE 11 - 只显示标签:


任何suggesti关于如何使它跨浏览器兼容?

+0

'optgroup'支持狡猾之前,你甚至开始在它扔CSS。如果你想浏览器的支持,限制自己的'option'元素和背景图像/ ASCII艺术/不间断空格/'disabled'实现的东西,将行为和外观相似;或者选择使用JavaScript的自定义解决方案来提供所需的功能和格式化功能。 – CBroe

+0

我不仅::之前使用稳定的解决这个... –

回答

1

你不能同时显示,因为你将覆盖默认::before,这就是浏览器不正是。 Chrome似乎应用了它,但它不符合标准规范。所以在这种情况下,Firefox和IE正在按预期工作。

<optgroup>标签是由浏览器造型就象这样:

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

如果忽略content财产,没有什么可以做。

我的建议是,以消除你的代码content属性,但你必须解决另一个相关的问题。见截图:

firefox screenshot

看到它的工作:

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

+1

也可参考这个帖子https://bugzilla.mozilla.org/show_bug.cgi?id=219417 –

+0

好** **历史参考@JonesJoseph ,但我同意这不是一个错误的评论。在覆盖该风格之前,有很多选项。 –

+0

同意.. !!有解决方法! ':)' –