瀏覽器兼容性問題

以下代碼獲取僅在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關於如何使它跨瀏覽器兼容？

來源

2017-06-05 asaf

'optgroup'支持狡猾之前，你甚至開始在它扔CSS。如果你想瀏覽器的支持，限制自己的'option'元素和背景圖像/ ASCII藝術/不間斷空格/'disabled'實現的東西，將行爲和外觀相似;或者選擇使用JavaScript的自定義解決方案來提供所需的功能和格式化功能。 – CBroe

我不僅::之前使用穩定的解決這個... –

你不能同時顯示，因爲你將覆蓋默認::before，這就是瀏覽器不正是。 Chrome似乎應用了它，但它不符合標準規範。所以在這種情況下，Firefox和IE正在按預期工作。

的<optgroup>標籤是由瀏覽器造型就象這樣：

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

如果忽略content財產，沒有什麼可以做。

我的建議是，以消除你的代碼content屬性，但你必須解決另一個相關的問題。見截圖：

看到它的工作：

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

來源

2017-06-05 11:36:22

也可參考這個帖子https://bugzilla.mozilla.org/show_bug.cgi?id=219417 –

好** **歷史參考@JonesJoseph ，但我同意這不是一個錯誤的評論。在覆蓋該風格之前，有很多選項。 –

同意.. !!有解決方法！ '：）' –

瀏覽器兼容性問題

回答

相關問題