3

他の誰かがこれに遭遇したことがありますか？再現するためにjsfiddleで非常に簡単な例を作成しました：http://jsfiddle.net/3UHSc/2/

<a class="btn btn-small">
    <i class="icon-edit"></i> Edit
</a>

ボタンは Firefox と IE では問題なく表示されますが、Chrome ではアイコンの上部のピクセルが切り取られます。アイコンのフォントを小さくするスタイル ルールを追加することで、この問題を回避できます。

.btn-small > i
{
    font-size: 11px;
}

しかし、これを機能させるためのより良い/よりクリーンな方法があるかどうか疑問に思っています。

4

2 に答える 2

1

SVG アイコン フォントには、Chrome でのレンダリングの問題があります。ソース内の woff ファイルを SVG ファイルと交換してみてください。Chrome でのアイコン フォントのカットオフの防止についてのブログ投稿も書きましたので、ぜひご覧ください。

つまり、これを変更します。

@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
    url('fonts/icomoon.woff') format('woff'),
    url('fonts/icomoon.svg#icomoon') format('svg'),
    url('fonts/icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;

}

これに：

@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
    /*
        The SVG font has rendering problems in Chrome on Windows.
        To fix this, I have moved the SVG font above the woff font
        so that the woff file gets downloaded.
    */
    url('fonts/icomoon.svg#icomoon') format('svg'),
    url('fonts/icomoon.woff') format('woff'),
    url('fonts/icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;

}

于 2014-09-10T23:31:57.490 に答える
-1

CSS を上書きして改行なしスペース ( \00a0) を追加し、余分な左スペースを CSS で調整できます。例：

.fa-check-square-o:before {
    content: "\00a0\f046";
}
于 2016-12-08T01:48:35.023 に答える