[下に追記あり / 20100915]
タイトルが意味不明なのはわかってるんだけど、上手くまとめられなかったです。
あと内容はあまり役に立たないと思います。
例えば、aタグをdisplay:block;すると、クリック出来る範囲が広がるのでリンクが押しやすくなってちょっと優しかったり
背景をうまいこと操ってテキストなのにリッチなメニューを作れたりするのでご存知かと思いますが
ある要素内のテキストにaをdisplay:blockしてpaddingで広げる仕様のリンクが入ったり入らなかったりする下のようなhtmlとcssがあった場合,
1 2 3 4 5 6 | <dl> <dt>dt / リンクなし</dt> <dd><a href="#">dd / リンクあり</a></dd> <dt><a href="#">dt / リンクあり</a></dt> <dd><a href="#">dd / リンクあり</a></dd> </dl> |
リンクのないdtにもpaddingをつけてレイアウトを揃えようとして、対策を何もしないと
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | dt { padding:10px; background:#09c; } dt a { display:block; padding:10px; background:#ace; } dd a { display:block; padding:10px; background:#f7f7f7; } |
dtのpaddingとdt aのpaddingでdt aのレイアウトが揃わない。![[image]現状dtとdt aのpaddingが合計されるので広がる](https://i1.wp.com/blog.sakurachiro.com/wp-content/uploads/2010/09/20100913-1.png "現状")
理想としてはこうしたいのが心情。![[image]dtの中身にリンクがあってもpaddingが変わらないようにしたい](https://i1.wp.com/blog.sakurachiro.com/wp-content/uploads/2010/09/20100913-2.png "理想")
簡単にどうにかする方法がないかなとちょっと考えてみた。
ネガティブマージンを追加すると
まず、一番最初に思いついたのがネガティブマージン。
dt aにmargin:-10px;みたいなのを追加してみると
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | dt { padding:10px; background:#09c; } dt a { display:block; padding:10px; margin:-10px;/* ←追加 */ background:#ace; } dd a { display:block; padding:10px; background:#f7f7f7; } |
いきなり出来た(blogのcssを上手くリセットできてないのでmarginがちょっとおかしいけど)。
と思ったけど、IE6-7でみたら下記のように全然ダメだった。ちくしょう。![[image]左IE6 / 右IE7](https://i1.wp.com/blog.sakurachiro.com/wp-content/uploads/2010/09/20100913-3.png "左IE6 / 右IE7")
(デタラメに)IE対策してみた
どうせhasLayoutでどうにかなんでしょ？とか適当なノリでzoom:1;を追加したり。
1 2 3 4 5 6 7 8 | dt a { margin:-10px; /position:relative;/*IE6-7*/ /margin-top:-13px;/*IE6-7 なんかmargin-topに3pxの隙間が出てたから3px多めにした */ } dd a { /zoom:1;/*IE6-7 これがないとdt a以下のdd aのdisplay:blockが範囲はあるのに反応しなかった */ } |
結果
上記「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
今度は大丈夫そうだけどどうだろう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | dt { padding:10px; } dt,dd { /zoom:1;/*IE6-7用*/ /overflow:hidden;/*IE6-7用*/ } dt a,dd a { display:block; padding:10px; } dt a { margin:-10px; } |
ちなみにhasLayoutはzoomでtrueになるみたいだけど
position: relative;でfalseになるそうな。
hasLayoutメモ | CSS | understandard.net
hasLayoutの値をtrueにする指定
プロパティ 値 display inline-block float left もしくは right height any value position absolute width any value writing-mode tb-rl zoom any value hasLayoutの値をfalseにする指定
プロパティ 値 display block もしくは inline float none height auto position static もしくは relative width auto writing-mode lr-tb zoom normal
