Internet Explorer 7 で子要素の幅が意図せず崩れる？原因と解決策を解説

Internet Explorer 7 で絶対配置された親要素における子要素のパーセンテージ幅が崩れる理由

Internet Explorer 7 (IE7) では、絶対配置された親要素の子要素にパーセンテージ幅を設定すると、幅が意図せず崩れる場合があります。これは、IE7 の古いボックスモデルと CSS 2.1 の解釈に起因する問題です。

原因

この問題の根本的な原因は、IE7 が古いボックスモデルを使用していることです。このモデルでは、要素の幅はコンテンツ幅、パディング、ボーダーの合計で計算されます。一方、CSS 2.1 では、要素の幅はコンテンツ幅のみで計算されます。

IE7 では、絶対配置された親要素の子要素にパーセンテージ幅を設定すると、親要素の幅が子要素の幅に影響を与えます。これは、IE7 が子要素の幅を計算する際に、親要素のコンテンツ幅ではなく、親要素の総幅 (コンテンツ幅 + パディング + ボーダー) を参照するためです。

解決策

この問題を解決するには、以下の方法があります。

子要素に box-sizing: content-box を設定する

box-sizing: content-box を設定すると、IE7 は子要素の幅を計算する際に、親要素の総幅ではなく、コンテンツ幅のみを参照します。

.child-element {
  box-sizing: content-box;
  width: 50%;
}

親要素に position: relative を設定する

position: relative を設定すると、IE7 は子要素の幅を計算する際に、親要素の幅を考慮しなくなります。

.parent-element {
  position: relative;
}

.child-element {
  width: 50%;
}

calc() を使用する

calc() を使用すると、パーセンテージ値と固定値を組み合わせて幅を指定できます。

.child-element {
  width: calc(50% - 10px);
}

JavaScript を使用する

JavaScript を使用して、子要素の幅を動的に設定することもできます。

const childElement = document.querySelector('.child-element');

childElement.style.width = '50%';

<div class="parent-element">
  <div class="child-element">
    コンテンツ
  </div>
</div>

CSS

.parent-element {
  position: relative;
  width: 400px;
  height: 400px;
  border: 1px solid black;
}

.child-element {
  /* 解決策 1 */
  /* box-sizing: content-box; */

  /* 解決策 2 */
  /* position: absolute; */
  /* left: 0;
  top: 0; */

  /* 解決策 3 */
  width: calc(50% - 10px);

  /* 解決策 4 */
  /* JavaScript で設定 */

  background-color: red;
  height: 100px;
}

JavaScript

// 解決策 4

const childElement = document.querySelector('.child-element');

childElement.style.width = '50%';

!important を使用すると、IE7 に対してスタイルを強制的に適用することができます。ただし、!important は濫用するとコードの読みやすさが低下するため、最後の手段として使用することをおすすめします。

.child-element {
  width: 50% !important;
}

子要素に固定幅を設定する

子要素に固定幅を設定することで、IE7 での幅の崩れを防ぐことができます。ただし、この方法はレスポンシブデザインには対応していないため、注意が必要です。

.child-element {
  width: 200px;
}

IE7 以外のブラウザ向けの CSS を別途用意する

IE7 以外のブラウザ向けの CSS を別途用意することで、IE7 でのみ問題が発生するのを防ぐことができます。ただし、この方法はコード量が増加するため、メンテナンスが大変になる可能性があります。

/* IE7 以外 */
.child-element {
  width: 50%;
}

/* IE7 のみ */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .child-element {
    width: 200px;
  }
}

JavaScript を使用して、IE7 でのみ子要素の幅を動的に設定することができます。ただし、この方法は JavaScript の知識が必要となります。

// IE7 でのみ実行
if (document.documentMode === 7) {
  const childElement = document.querySelector('.child-element');

  childElement.style.width = '200px';
}