iOSでリスト要素のmarkerが左に飛び出る現象の原因と対策

このサイトは、Cocoonの目次をカスタマイズしています。

ネタ元は以下のサイトです。

WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はCocoonに標準で備わっている「目次」のデザインをカスタマイズしていきたいと思います。開閉させる時にうぃーんとアニメーションさせてみました。完成するとこのようになりま

このカスタマイズでずっと問題なかったのですが、最近iOSでサイトを確認するとリストのマーカー部分(数値)が左に飛び出す現象が発生するようになりました。

PCで検証ツールなどで確認しても問題は再現しないので、iOS特有の問題のようです。

この記事で分かること

問題箇所
修正案
直接の原因

問題箇所

問題箇所は、以下の記述の部分で、アンダーラインをマーカー部分まで左に伸ばすためのCSSがうまく動かなくなったようです。

.toc ul li a, .toc ol li a {
    display: block;
    border-bottom: 1px dashed #666; /*h3以下の下側ボーダー*/
    margin-left: -20px;
    padding-left: 20px;
}

修正案

この部分を削除すると、マーカーが左に飛び出す問題は解消しました。

ただ、これを消すとアンダーラインがマーカーの下まで伸びなくなります。

.toc ul li a, .toc ol li a {
    display: block;
    border-bottom: 1px dashed #666; /*h3以下の下側ボーダー*/
    /*margin-left: -20px;
    padding-left: 20px;*/
}

li要素はマーカーをboxに入れるか入れないかを、list-style-positionでinsideとoutside（初期値）で指定できます。

insideに指定すれば、アンダーラインはli要素全体に引かれるようになります。一方、子要素を持つli要素の場合、子要素を含めたli要素のbottomにアンダーラインが引かれるので、うまくいきません。