###前提・実現したいこと
疑似要素で■+数字を実現しているリストを、
column-countで2段組にしたいと考えています。
なお、リスト数は変動します。
###発生している問題・エラーメッセージ
ChromeやEdgeでは問題なく表示されるのですが、
IEだと以下の画像のように表示されます。
###該当のソースコード
html
1<!doctype html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>test</title> 6 <link rel="stylesheet" type="text/css" href="test.css"> 7</head> 8<body> 9 <section style="column-count: 2"> 10 <ol> 11 <li>ちくわ</li> 12 <li>大根</li> 13 <li>ちくわ</li> 14 <li>大根</li> 15 <li>ちくわ</li> 16 <li>大根</li> 17 <li>ちくわ</li> 18 <li>大根</li> 19 <li>ちくわ</li> 20 <li>大根</li> 21 <li>ちくわ</li> 22 </ol> 23 </section> 24</body> 25</html>
css
1ol { 2 counter-reset: list; 3 min-width: 150px; 4} 5 6ol li { 7 position: relative; 8 height: 25px; 9 line-height: 25px; 10 margin: 0 0 15px 25px; 11 padding-left: 5px; 12} 13 14ol li:before { 15 counter-increment: list; 16 content: counter(list, upper-alpha); 17 position: absolute; 18 left: -25px; 19 width: 25px; 20 height: 25px; 21 line-height: 25px; 22 background: #36479f; 23 text-align: center; 24 color: #eee; 25}
「画像のように」とは不要な項目にラベル背景が付いている状況でしょうか。問題が再現しません。https://jsfiddle.net/sykwx691/1/
リストの数によっては問題なく表示されることを記載し忘れていました。すみません。「画像のように」とは「ごぼてん」がきれいに改行されずに段にまたがって表示されている状況を指しています。ご提示のサイトではリスト数を変えても問題は再現できませんでした。調査します。
回答1件
あなたの回答
tips
プレビュー