CSS：之前不工作在IE11

我用FontAwesome的圖標替換傳統的單選按鈕。在Chrome和Firefox中一切都很好，但是IE11遇到了問題 - 我替換單選按鈕的圖標根本沒有顯示出來。CSS：之前不工作在IE11

編輯與工作小提琴：在Chromehttps://jsfiddle.net/sow1a04m/

例子：

實例IE11：

這裏是我的HTML：

<tr> 
    <td class="vert-align">Valid Signed and dated delivery ticket in patient's record.</td> 
    <td class="text-center vert-align"> 
     <label> 
      <input type="radio" name="radio-group-1" id="radio-group-1-Y" value="Y" /> 
     </label> 
    </td> 
    <td class="text-center vert-align"> 
     <label> 
      <input type="radio" name="radio-group-1" id="radio-group-1-N" value="N" /> 
     </label> 
    </td> 
    <td class="text-center vert-align"> 
     <label> 
      <input type="radio" name="radio-group-1" id="radio-group-1-NA" value="NA" /> 
     </label> 
    </td> 
</tr>

這是我的CSS：

#dlg-audit-intake-compliance-checklist input[type=radio] { 
    visibility: hidden; 
} 

#dlg-audit-intake-compliance-checklist input[type=radio]:hover { 
    cursor: pointer; 
} 

#dlg-audit-intake-compliance-checklist input[type=radio]:before { 
    visibility: visible; 
    font-family: FontAwesome; 
    content: "\f10c"; 
    font-size: 25px; 
    text-shadow: 1px 1px 0px #ddd; 
    margin-bottom: 10px !important; 
} 

#dlg-audit-intake-compliance-checklist input[value=Y]:checked:before { 
    color: #009C15; 
    content: "\f00c"; 
} 

#dlg-audit-intake-compliance-checklist input[value=N]:checked:before { 
    color: #AD0000; 
    content: "\f00d"; 
} 

#dlg-audit-intake-compliance-checklist input[value=NA]:checked:before { 
    color: #F7D200; 
    content: "\f05e"; 
}

我想它可能有一些做的visibility設置我申請，但我一直沒能弄明白我的擁有。

來源

2016-06-15 FastTrack

你可以張貼工作代碼段與鏈接所以我們的問題重現的字體，因爲現在它會有很多猜測 – LGSon

還檢查了這張貼，它可能會給提示：http://stackoverflow.com/questions/23954877/internet-explorer-11-and-supported-web-fonts – LGSon

@LGSon謝謝你！我只是用小提琴更新了我的問題，顯示了問題。在Chrome瀏覽器中查看Fiddle的效果很好，但正如您在IE11中看到的那樣，圖標不顯示。我還會檢查你發佈的鏈接。 – FastTrack

問題是在輸入元素上使用僞元素，它在IE中不起作用，而是使用標籤作爲目標，而不是在Chrome中工作，或者僞元素假設不能在單標記元素。

我改變了這個規則，告訴你如何能做到，所以你會看到它現在FontAwesome工作

#dlg-audit-intake-compliance-checklist label:before { 
    font-family: FontAwesome; 
    content: "\f10c"; 
    font-size: 25px; 
    text-shadow: 1px 1px 0px #ddd; 
    margin-bottom: 10px !important; 
}

Updated fiddle

來源

2016-06-15 19:08:46 LGSon

可以跨瀏覽器和操作系統不可靠的風格選和單選投入。這不是特定於IE的問題。它是一個操作系統控制。使用CSS來定位輸入標籤並改爲隱藏複選框。

HTML

<input type="checkbox" id="checkbox"> 
<label for="checkbox"></label>

CSS

input[type="checkbox"] { 
    display: none; 
} 

input[type="checkbox"] + label { 
    background-image: /* whatever */ 
} 

input[type="checkbox"]:checked + label { 
    background-image: /* whatever */ 
}

來源

2016-06-15 19:11:19 user2867288

與在選擇列表中使用禁用選項作爲IE中的標題一樣，但有一個技巧使得文本在IE中是灰色的（沒有文本陰影）而CSS可以在其他瀏覽器中使用。 – yardpenalty

我想如果你用標籤包裝複選框，你甚至不需要for =使標籤可以點擊，如果我沒有弄錯的話。可能只是一個引導不確定的東西 – yardpenalty

@yardpenalty這是正確的，雖然'：checked'代碼不會工作，因爲它不能定位到'input'的父代，所以現在需要怎麼做才能完成所要求的工作由OP – LGSon

CSS：之前不工作在IE11

回答

相關問題