Internet Explorer的輸入：已選中+標籤：在未渲染樣式之前

Question

我在自定義複選框的Internet Explorer中顯示:checked樣式時遇到了一些問題。

他們在Chrome中工作得很好。

...但在IE

以下是有關造型

input[type="radio"], input[type="checkbox"] { 
    opacity: 1; 
    position: absolute; 
    top: -9999; 

    & + label { 
     vertical-align: middle; 
    } 
} 

input[type="radio"] + label:before, 
input[type="checkbox"] + label:before { 
    content: '\f3fd'; 
    font-family: 'Ionicons'; 
    width: 26px; 
    height: 20px; 
    border: 2px solid #45555F; 
    font-size: 24px; 
    color: transparent; 
    display: table-cell; 
    text-align: center; 
    transition: all 0.3s linear; 
    -webkit-transition: all 0.3s linear; 
    -moz-transition: all 0.3s linear; 
    -ms-transition: all 0.3s linear; 
    -o-transition: all 0.3s linear; 
    padding: 0 2px; 
} 

input[type="radio"]:checked + label:before, 
input[type="checkbox"]:checked + label:before { 
    content: '\f383'; 
    font-family: 'Ionicons'; 
    font-size: 24px; 
    width: 26px; 
    height: 20px; 
    text-align: center; 
    display: table-cell; 
    padding: 0 2px; 
    border: 2px solid #45555F; 
    color: #8ec549; 
} 

input[type="radio"] + label:before { 
    border-radius: 50% !important; 
} 

我確實也注意到，Internet Explorer的只是消除了對負載的樣式.. 。

感謝您的幫助！

編輯：Codepen演示（該演示不工作在IE要麼）

http://codepen.io/anon/pen/rLJqyK

Answer 1

相對於在檢查我簡單地使用的:after僞元件爲活動狀態和輕拂修改:before僞元件在不透明之間隱藏並相應地顯示它們。

感謝任何幫助過的人。

Answer 2

它看起來像是In IE11 using pseudo element ::before and display:table-cell and glyphicons contens wont show up的副本。

總之，有一個bug in IE10 and 11font樣式被忽略的虛擬元素table-cell顯示。

如假定重複的問題提到的，適當的解決將是結合使用一些其他display類型僞元素與您width和height風格進行必要的調整。

Answer 3

問題你面對是一個已知的IE10 - IE11錯誤，在這兩個瀏覽器往往與display: table-cell完全不顧僞元素的字體聲明。這意味着，性能font，font-size，font-family，color等將全部被擊中。

爲了規避這個錯誤，它會在你的情況足以：

▶使用display: table-cell與實際的元素，而不是一個僞元素，或

▶變化display: table-cell到display: inline-block或其他一些non-table-cell value for你的僞元素。

▶聲明其具有比none以使其變爲display: table-cell到display: block其他的值的float屬性。

---

下面是一些面對display: table-cell還有一個問題，可能是有幫助的問題：

▶ IE not coloring :before as table-cell, why?

▶ Positioning of div inside display:table-cell in IE 10

▶ Display table-cell on pseudo element in IE11