2017-06-05 183 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

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