IE7でmarginが消える問題の回避方法

たぶん既出ネタですが、ふと見つけたので一応。

症状

IE7で、marginが消える場合があります。

再現条件は、

  • paddingが0以外のブロック要素Aに囲まれている
  • Aの最初の子要素(空白・TAB・改行以外)がブロック要素Bである
  • Bにheightmarginが指定してある(たぶんhasLayoutがtrueになるならheight以外でも該当)

こんな感じみたいです。

これらを満たすと、Bのmarginが無視されます。
シンプルな再現HTMLは以下の通りです。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>

<div style="padding:1px;">
<div style="margin:100px; height:20px;">こんにちは</div>
<div style="margin:100px; height:20px;">ハロー</div>
</div>

</body>
</html>

これを開くと、IE7以外では「こんにちは」と「ハロー」の左端はそろいますが、IE7では「こんにちは」が左に寄ってしまいます。

回避方法

解決するには、Bを先頭子要素でなくせばいいので、適当なコメントを入れます。

<div style="padding:1px;">
<!– bugfix for IE7 –>
<div style="margin:60px; height:20px;">こんにちは</div>
<div style="margin:60px; height:20px;">ハロー</div>
</div>

やっぱりIE7は地雷ですね。
自動更新でIE8が入るようになったのがせめてもの救いです。

デザインも頼めるシステム開発会社をお探しならBPS株式会社までどうぞ 開発エンジニア積極採用中です! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

baba

ゆとりプログラマー。 高校時代から趣味でプログラミングを初め、そのままコードを書き続けて現在に至る。慶應義塾大学環境情報学部(SFC)卒業。BPS設立初期に在学中から参加している最古参メンバーの一人。Ruby on Rails、PHP、Androidアプリ、Windows/Macアプリ、超縦書の開発などを気まぐれにやる。軽度の資格マニアで、情報処理技術者試験(16区分17回 + 情報処理安全確保支援士試験)、技術士(情報工学部門)、Ruby Programmer Gold、AWSソリューションアーキテクト(アソシエイト)、日商簿記2級、漢検準1級などを保有。

babaの書いた記事

夏のTechRachoフェア2019

週刊Railsウォッチ

インフラ

ActiveSupport探訪シリーズ