文字間隔指定でa要素のborderが被る IEの挙動

[新着] Webテンプレートを仮オープンしました



0   名前: K+S : 2006/09/04(月) 01:30  ID:nROqylMa
IEの挙動に関しての質問です。(Windows XP msie6.0 で確認)

letter-spacingが0でない値のul要素内で、li要素にdisplay:inlineを指定しています。
ul要素の4辺のいずれかにborderが存在している状態でul要素の内容の最後の文字がa要素の内容であるとき、その文字までa要素のborderがかかりません。
ul要素のborderがなければ問題ありません。

HTMLソースは、
<ul><li></li>…<li><a href="#">文字</a></li></ul>

のように、最後のli要素の終了タグとul要素の終了タグの間に空白類文字を直接含まないようにして、a要素の最後の文字がul要素の最後の文字であるようにしています。

▼サンプルです。
http://jpan.jp/?sample
2個目と3個目のborderの右端が"字"にかかってしまっています。


これだけに関してであれば、li要素の終了タグとul要素の終了タグの間に空白類文字を挟むなどすれば解消できると思いますが、もし他の場合(要素)でもletter-spacingによる問題(IEバグ)があるようであれば、それに関しても考慮したいと思っております。

今回、上記の場合においての問題に遭遇したのですが、試行錯誤しても検索しても直接的な原因や関連しそうな問題の追究ができませんでした。
何か、これらに関しての詳細やアドバイス等がありましたらご教示よろしくお願いいたします。

1   名前: sevi- : 2006/09/04(月) 01:30  ID:9J5RKOHs
取りあえずletter-spacingをULからLIの方に付け直してみてはどうか.
確かそれで直ると思ったぞ.

2   名前: K+S : 2006/09/04(月) 01:30  ID:nROqylMa
回答ありがとうございます。

>>0の例ではul要素のletter-spacingプロパティ値が0でないことで問題が生じるので、仰る通りでございます。
全称セレクタでの指定に併せて、特定の要素に打ち消しの指定を入れて解消しようと思います。

一覧へ戻る