0

ulタグとliタグを使用してHTMLナビゲーションストリップを作成しました。

<div id="navLimitedLength">
    <ul id="navmenulist">
        <li class="menu"><a>Add</a></li>
        <li class="menu"><a>Update</a></li>
        <li class="menu"><a>View</a></li>
        <li class="menu"><a>Delete</a></li>
    </ul>
</div>

最初に、CSSを使用してArialフォントを使用するように次のように設定しました。

    li.menu a
    {   
        text-decoration:none;
        font-family:Arial;
        font-size:18px;         
    }

次に、フォントを次のようにSegoeUIに変更しようとしました。

li.menu a
{   
    text-decoration:none;
    font-family: 'Segoe UI';
    font-size:18px;         
}

ただし、これによりメニューの外観も変更され、メニューが重なるようになります ここに画像の説明を入力してください

私が理解している限り、フォントを変更しても他のスタイルは変更されません。これは、IE8で試しているためかもしれません。

しかし、物事が所定の位置にとどまり、望ましい方法で動作することを保証するための標準的な方法は何ですか。

4

2 に答える 2

0

この違いは、フォントごとにデフォルトの行の高さが異なるために発生します。CSS仕様では、の初期値line-heightはnormalであり、仕様では、ブラウザは「使用される値を要素のフォントに基づいて「合理的な」値に設定する」ことが期待されています。Firebugで状況を調べると、18pxのArialの場合は22pxが使用されていますが、SegoeUIの場合は25pxであることがわかります。

この場合、例えばline-height: 1.2スタイルシートに追加すると役に立ちます。

于 2013-01-22T09:17:24.067 に答える
0

フォントが異なれば、標準も異なります。したがって、線の高さを低くすることをお勧めします。それはあなたの問題を解決します。

正確な行の高さを取得するには、FirefoxのFirebugを使用して行の高さを調整します

li.menu a
{
    text-decoration:none;
    font-family: 'Segoe UI';
    font-size:18px;
    line-height:10px; //this value is for sample purpose
}
于 2013-01-22T07:40:54.023 に答える