ある要素内にpaddingが付いてる子要素があったりなかったりする場合に余計なclassを付けないでpaddingを揃える

[下に追記あり / 20100915]
タイトルが意味不明なのはわかってるんだけど、上手くまとめられなかったです。
あと内容はあまり役に立たないと思います。

例えば、aタグをdisplay:block;すると、クリック出来る範囲が広がるのでリンクが押しやすくなってちょっと優しかったり
背景をうまいこと操ってテキストなのにリッチなメニューを作れたりするのでご存知かと思いますが

ある要素内のテキストにaをdisplay:blockしてpaddingで広げる仕様のリンクが入ったり入らなかったりする下のようなhtmlとcssがあった場合,

リンクのないdtにもpaddingをつけてレイアウトを揃えようとして、対策を何もしないと

dtのpaddingとdt aのpaddingでdt aのレイアウトが揃わない。
[image]現状dtとdt aのpaddingが合計されるので広がる

理想としてはこうしたいのが心情。
[image]dtの中身にリンクがあってもpaddingが変わらないようにしたい

簡単にどうにかする方法がないかなとちょっと考えてみた。

ネガティブマージンを追加すると

まず、一番最初に思いついたのがネガティブマージン。
dt aにmargin:-10px;みたいなのを追加してみると

いきなり出来た(blogのcssを上手くリセットできてないのでmarginがちょっとおかしいけど)。

と思ったけど、IE6-7でみたら下記のように全然ダメだった。ちくしょう。
[image]左IE6 / 右IE7

(デタラメに)IE対策してみた

どうせhasLayoutでどうにかなんでしょ?とか適当なノリでzoom:1;を追加したり。

結果

検証ページ-1

上記「IE対策してみた」に不具合があったみたいなので追加+もう一回

よく判らない3pxの隙間を、hack使って無理やり余分なmargin分無かったことにするのっていくら何でも無いよなぁと思っていたら、@ethertankさんからこんなツイートが。
(ソースの不恰好という話とは別な問題で)タブ移動時に表示が崩れる事があるそうな、そんでもってこうゆう風にしたらよくなりますよとわざわざサンプルまで作ってくれました><感謝。
ネガティブマージンによる領域拡張

さっそく参考にさせてもらうと

dt,dd,
dt a,dd a {
/position: relative;
/zoom: 1;
}

親にも指定するのがキモなのかな?余分なmargin指定がなくなってますね。
あとhoverに着色してあるからクリック出来る範囲が広がっているのを分かりやすく確認出来ますわ、うちもこうしておけば良かったのに気がきかなかったなぁ、パクろう。

overflow:hidden

でもってちょっと上で書いたけど前回の無理やりな記述は無いなぁと思っていたので自分なりに別の方法試してみました。

そもそもなんでposition:relative;にしたんだろう?
前々回のネガティブマージンでハミ出した要素がIE6で切れたら。で使ってみたのが頭の隅にあったからかな?
とりあえずこれから離れてみよう。

そうすると次はoverflow:hidden;とかdisplay:inline-block;とかかな、なんとなく。
overflow:hidden;はclearfixの変わりに使えたりするし。

余分なmarginを指定しないように、こんな感じで描いてみた。
検証ページ-2

今度は大丈夫そうだけどどうだろう。

ちなみにhasLayoutはzoomでtrueになるみたいだけど
position: relative;でfalseになるそうな。

hasLayoutメモ | CSS | understandard.net

hasLayoutの値をtrueにする指定

プロパティ
displayinline-block
floatleft もしくは right
heightany value
positionabsolute
widthany value
writing-modetb-rl
zoomany value

hasLayoutの値をfalseにする指定

プロパティ
displayblock もしくは inline
floatnone
heightauto
positionstatic もしくは relative
widthauto
writing-modelr-tb
zoomnormal


コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.