© Aomixer.com All rights reserved.

20101/24

ブラウザ互換の壁 マージンが倍になるバグ

Webサイトをコーディングする際にいつも悩ませられるのがブラウザ互換です。

float:leftをかけたボックスのマージンを10pxとしていたら
InternetExplorer 6では、なぜかマージンの値を
倍の数値(この場合20px)で取ってしまうというバグがあります。

2カラムのスタイルで、右のカラムが下に行ってしまったというのは
このバグのせいであることが多いです。

clear:bothをかけたボックスも同様のバグが発生するようです。

ちなみにこれを何とかするには、

  • marginを使用せず、paddingで代用する
  • アンダースコアハック(_margin: 5px;)でIEに半分の値を適用させる
  • float:leftをかけたボックスにdisplay:inlineを追加する

などがあります。

最後のdisplay:inlineを追加するのが一番お手軽かなと思います。
このブログでもdisplay:inlineで回避しています。

アンダースコアハックは便利なのですが、
W3C CSS Validatorでエラーになるので多用しないほうがいいです。

  • このエントリーをはてなブックマークに追加

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

201710/15

PageSpeed Insightsで高評価を得るには

GoogleのPageSpeed Insightsというサービスをご存知でしょうか。 サイトのURLを入力すると、速度計測と該当サイト…

メイプルストーリー復帰しました

復帰したら狩りが楽になっている・・・? LV91聖魔でしたが、今では150!!(キャプチャは145のときのですが;;) …

201511/17

VPSでWordPressサイトを作るのに必要なスペックは?

VPSをDTI→お名前.com(KVM)に切り替えました。 というのも、WordPressってCPUへの負荷が高いのなんのって! DTI…

201511/17

マルチサイト機能でコンテンツを特化!

こんにちは。お久しぶりです。 とある別サイトにかまけておりました。そういうこともあるよね! このたびサイト内からDQXコンテンツを非…

201510/2

検索クエリでQ&A

・・・をしようと思った時に気付いたのですが、 Google AnalyticsのUAコードを今使ってるテンプレートに移行するの忘れてたてへ…

ページ上部へ戻る