「ul、ol」タグのズレによってリンクがクリックできない現象
liタグの中にリンクを設置すると、liタグの中の文字とそのリンクの位置が一致しないケースがあります。つまり、リンクのあるはずの位置でクリックしてもポインターの反応も含めて、何も変化しないということです。「ul、ol」タグのズレですね。もちろん、「ul、ol」の初期値はブラウザによって若干異なるのが普通ですので、それ自体は問題ないと思うのですが、どうやら文字と存在するはずのリンクがうまく重なっていない模様です。また、スタイルはインライン化しない状態で縦長のリストを10行ほど超えたあたりでズレが発生するようです。
テンプレートを作成する際、「ul、ol」のmargin-leftとpadding-leftを初期値から変更して使用している場合、その値に伴ってリストマークもズレます。同じようにbottomの値を変更していれば初期値はズレます。このような設定が影響しているのかと考えて削除と追加を繰り返したところ、どうやらページ内linkを設置している場合に限って文字とlinkがズレるようです。
「ul、ol」のズレへの対応策は、
1 |
2 |
3 |
4 |
5 |
ul,ol { |
list-style:none; |
margin:0; |
padding:0; |
} |
とした場合、
1 |
2 |
3 |
4 |
5 |
#entry ol { |
list-style-type: decimal; |
padding:5px 0 5px 35px; |
margin-bottom:35px; |
} |
などとして(五行目)、下に押し下げることでとりあえず回避できます。linkをクリックできないというのも本末転倒な話ですので、当面はこれで対応することにします。「ul、ol」のズレの現象はブラウザによって若干解釈が異なるようですが、初期値の変更が影響していた訳ではないようです。