IE達による、謎のスキマ。。。

テーブルを入れ子にして、外側のTDのborderをnoneに設定。
内側のborderには普通にsolid 1pxを設定。

・・・ううむ、IEで見たときに、TDのbottomにわずかな余白が・・・
IE以外のブラウザではぴっちりとキレイなのに・・・(ToT)

これが、外側のTDのpaddingなのか、内側のtableのmarginなのか、よくわからん。

borderのwidhtを変えてみたり、色付けてみたり、大袈裟にmarginやpaddinを設定してもはっきりしない。

ええい、力業じゃ!とばかりに、内側のtableのmarginにマイナス値を設定したら、余白がなくなる現象を発見!

内側のtableのmarginを、-0.5pxにすると、キレイに余白がなくなりました。
margin-bottom:-0.5px;
いやだなあ・・・w

 

さあお次は、この設定をIEにだけ適用させないといけない。
ネットをいろいろ調べてたら、IEのみCSSを適用する方法って、結構でてきます。
「IEとそれ以外」という記述もやたらと出てくる。笑っちゃうよね、いい加減にしてって感じ┐(‘~`;)┌

覚え書きに記述例を載せておきます。
table {
border-style:none;
margin:0px;
border-collapse:collapse;
border-spacing:0px;

margin-bottom:-0.5px\9;    /* for IE8 */
*margin-bottom:-0.5px;    /* for IE7 */
_margin-bottom:-0.5px;    /* for IE6 */
}
table:not(:target) {
margin-bottom:-0.5px\9;    /* for IE9 */
}

 

しかし、IEのバージョンがアップする度に、この記述はどんどん下へ延びていくのだろうか・・・

いつも、IEハックのノウハウを拝借するばかりの私です(;´▽`A“
ほんとうに感謝m(_ _)m

 


トラックバック・ピンバックはありません

ご自分のサイトからトラックバックを送ることができます。

コメントをどうぞ