<i> inside <a>はFirefoxでは動作しません

Question

私はこう書いています。

<li class="settings-selected" role="presentation"> 
    <a href="#" role="menuitem">English 
     <i class="icon-check right"></i> 
    </a> 
</li> 

このコードは他のブラウザでは機能しますが、Firefoxでは表示されません（アイコンはliタグからプルダウンされています）。あなたは内およびとして含まれるテキストを変更することに焦点を当てている要素を使用している

Answer 1

そのため、このようなサポートは、ブラウザ間で理想的ではないかもしれません。私はあなたがアクセシビリティ（？）のためにそれをやっているかもしれないと思いますが、それは良い方法ではありません - 要素は読み込まれるテキストを含んでいません。

アイコンのスパンを使用し、アイコンをdisplay: block;（またはインラインにする必要がある場合はdisplay: inline-block;）にして、ブラウザ間で一貫して操作することを検討してください。

編集：コメントに基づいて再考した後、アイコンが垂直に整列していることを確認してください：topこれは通常のFirefoxの問題です（別のデフォルト設定）。それでも問題が解決しない場合は、CSSのキャッチに関する問題がある可能性があります。コードを投稿する必要があります。