お問い合わせはコチラから

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

サイト運営

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

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

【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にアンダーラインが引かれるので、うまくいきません。

直接の原因

今回の問題が起きる直接の要因は、margin-left:-20pxの部分で、li要素の子要素であるアンダーラインを手前にはみ出させることで、伸ばした時に、なぜかマーカーも一緒に手前に移動してしまうからです。

このCSSでは、マーカーの位置は変わらないはずです。

こねくり回せばどうにかなりそうな気がしますが、前まで動いていたわけなので、明らかにiOSのバグだと思うので、やる気が出ません。

全く別の方法でアンダーラインを引いた方が良さそうに思います。

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

目次
タイトルとURLをコピーしました