リストタグを使用時のIEでの変な隙間を消す 私的覚え書き。 リストタグを使用してメニューを作ったりする際にIEだけに変な余白が入る事がある。それを解消するネタ。 >>問題のサンプル・こんな感じ。 Firefox等で見るとちゃんとメニューの間が詰まっててＯＫなのだが、IEの場合だと勝手に余白が入る。marginやpaddingを0にしても、liタグを途中改行しても効果なしで、その都度ごまかしてきたりしてたんだけど、とりあえず原因はIEの場合、リスト内のインライン要素をブロック化すると余計な余白を入れるというかline-heightの解釈が正しくないっぽい。 >>対策はこんな感じ。 li { line-height:0; } a { display: block; background-color:#900; padding: 5px; color: black; text-decoratio
大抵のCSSバグは、回避法が有るので何とかなるのですが、回避法が特に存在していないバグの場合非常に困ります。 最近の仕事で、IEバグでは比較的発生しやすいIEバグが起こったのでメモとして記しておきます。 floatで左右どちらかに寄せているボックスに、marginの値を指定するとIE5.x/IE6の環境下で、指定値の2倍程度のmarginが設定される。 大抵の場合はpaddingで代用出来るのですが、今回のケースではdivなどのボックスに対して指定せず、h3などのblock要素に直接floatを指定し、marginで調整しようとした際に発生。 該当のh3には背景画像が指定されており、テキストの位置をpaddingで調整していたので、marginを指定するしか無く、バグが発生しました。 対応方法でいくつか候補はあったのですが、今回はアンダースコアハックで対応。 divを追加して対応という方法
Internet Explorer 7 は、 8 月にも beta3 がリリースされるかも知れないんだけど、今現在、IE7 beta2 を含むモダンブラウザに有効そうだと思われる CSS ハックを自分用にまとめておく。以前に IE 7 用の CSS ハックを紹介したことがあったけど、今回の Easy CSS hacks for IE7 - Nano See, Nano Do で紹介されていたハックは、比較的シンプルかも知れない。想定ブラウザは下記のとおり。 バージョン 6 以下の IE IE7 それ以外のモダンブラウザ（Safari、Opera、Firefox） ブラウザごとのハック 全てのサンプルは body 要素を指定の対象としている。 バージョン 6 以下の IE にのみ適用 * html body サンプルページ バージョン 7 の IE にのみ適用 *+html body サンプ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
