僞元素中的字體家族

似乎Internet Explorer 8,9,10在這裏使用的總是相同的（系統）字體。事實上，Internet Explorer根本不關心font-family。最重要的是display:table-cell和:before或:after組合：僞元素中的字體家族

<!DOCTYPE html> 
<html> 
<head> 
    <style> 

     body > div { 
      display: table; 
     } 

     body > div > div:before { 
      font-family: monospace; 
      display: table-cell; 
      content: 'Not a monospace font in IE.'; 
     } 
    </style> 
</head> 
<body> 
    <div> 
     <div> 
     </div> 
    </div> 
</body> 
</html>

這是一個已知的bug？找不到任何關於它的事情。

來源

2013-08-02 witrin

請參閱：http://stackoverflow.com/questions/14698234/ie-uses-courier-font-when-font-family-monospace-is-used?rq=1 –

不，這不是問題！當我切換到'display：inline-block;'時它工作。與'monospace'無關。如果你想在其中放入任何其他真正的字體。 – witrin

是在IE7中工作的僞元素？ – Praveen

http://jsfiddle.net/KnfaW/

在我看來，這display: table-cell引起該問題。

用戶代理必須忽略以下屬性：before和：after僞元素：'position'，'float'，列表屬性和表屬性。

的：前和：後僞元素元件允許「display」屬性的值如下：

如果選擇的受試者是塊級元素，允許值是「無」，「內聯「，」塊「和」標記「。如果'display'的值有任何其他值，則僞元素的行爲就好像該值是'block'一樣。
如果選擇器的主題是內聯級元素，則允許的值爲'none'和'inline'。如果'display'的值有任何其他值，僞元素的行爲就好像該值是'inline'一樣。

W3C CSS2

所以不是display: table-cell使用display: block。它將按預期工作。正如我的意見，IE的錯誤處理在這種情況下可能會有問題。

來源

2013-08-02 14:50:28 Maria

是的，我知道。但是找不到任何關於它的事情。 – witrin

這個建議'display：block'很不幸在我的情況下不是解決方案;這也不是問題。我認爲Internet Explorer在這裏的異常處理是一個bug，因爲它不像'block'那樣行爲，因爲它忽略了'font-family'屬性，它不是'位置'，'浮動'，列表或表格屬性。而且所有瀏覽器，甚至是Internet Explorer，都會忽略規範，因爲它們將僞元素視爲「表格單元格」。 – witrin

但是這個方向是正確的！ – witrin

僞元素中的字體家族

回答

相關問題