web-dev-qa-db-ja.com

liで箇条書きのサイズを大きくするにはどうすればよいですか？

IE8の箇条書きは非常に小さいため、フォントサイズを変更しようとしましたが、うまくいきませんでした。コード：

<ul style="padding:0; margin:0; margin-left:20px;">
    <li>item 1</li>
    <li>item 2</li>
</ul>

弾丸に画像を使用せずにこれを行う方法はありますか？

cssinternet-explorer-8html-lists
23
user964104

IE8の条件付きコメントでこれを行うことができます...

ul {
   list-style: none;
}

ul li:before {
   content: "•";
   font-size: 170%; /* or whatever */
   padding-right: 5px;
}

jsFiddle 。

IE7では、JavaScriptを使用して箇条書きを追加し、それに応じてスタイルを設定できます。

41
alex

Internet Explorerは、FirefoxおよびChromeのように、list-style-typeからfont-sizeまでの箇条書きのサイズ変更をネイティブにサポートしていないようです。これが既知の問題またはバグであるかどうかはわかりません。

回避策はありますが、画像が最も速く、より広くサポートされている「修正」である場合があります。

2
Doozer Blake

IE8 +は箇条書きの拡大縮小を行いますが、すべてのフォントサイズで拡大縮小するわけではありません。
私の修正は、Verdanaの弾丸がArialよりも大きいという事実に基づいています。 cssを使用してliにVerdanaを設定すると同時に、liのコンテンツの周りに余分なスパンを追加して元のフォントを保持します。また、Verdanaが行を高くできるので、それを補うためにline-heightを使用する必要があるかもしれませんが、それはブラウザに依存します。
また、liに大きなフォントサイズを使用して行頭文字をさらに大きくすることもできますが、行の高さをさらに小さくする必要があります。

ul {
    font: 12px Arial;
}
ul li {
    font-family: Verdana;
    line-height: 120%;
} /* font-size: 14px; line-height: 100%; */
ul li span {
    font: 12px Arial;
}

<ul>
    <li><span>item 1</span>
    <li><span>item 2</span>
</ul>
0
KS74