【IE8】min-widthが適用されない【CSS】

IE8でCSSのmin-widthタグが適用されない場合の対処法

html5

min-width使用上の注意点

ボックスの最小の横幅を設定するmin-widthタグは、次の条件を満たすのIEでは適用されません。

  • Internet Explorer 5IE6などの古いIEを使用している場合
  • IE7以上を使用しているが、互換モード(Quirksモード)でレタリングされている場合

つまり、IE7以上のIEを使っていても、DOCTYPE宣言 によって互換モードで表示されている場合はmin-widthタグは適用されません


解決策

DOCTYPE宣言 を変更すれば使用できるようになります。

しかし、DOCTYPE宣言によって使用可能なタグは異なり、現在のレイアウトが崩れる危険性があるので、今回はJavascriptの一種であるjqueryを今回は使用します。

具体的には、htmlのhead部分に以下のタグを挿入すれば、DOCTYPE宣言を変更することなくmin-widthタグを使用することができます。

<script type="text/javascript" src="http://cdn.halpas.com/js/minmax-1.0.js"></script>

もしくは、ここからjqueryをダウンロードして自分のサーバスペースにアップしてください。

なお、このスクリプトは

  • min-width? ・・・要素の最小幅
  • max-width ・・・ 要素の最大幅
  • min-height ・・・ 要素の最小の高さ
  • max-height・・・ 要素の最大の高さ

に効果があります。


DOCTYPEスイッチと表示モードの関係

種類 DOCTYPE宣言の記述 WinIE7以上 WinIE6以下

なし 互換 互換
HTML4.01Strict <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN"> 標準 標準
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN" “http://www.w3.org/TR/html4/strict.dtd"> 標準 標準
HTML4.01Transitional <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN"> 互換 互換
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN" “http://www.w3.org/TR/html4/loose.dtd"> 標準 標準
HTML4.01Frameset <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN"> 互換 互換
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN" “http://www.w3.org/TR/html4/frameset.dtd"> 標準 標準
XHTML1.0Strict <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 標準 標準
<?xml version="1.0″ encoding="文字コード"?><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 標準 互換
XHTML1.0Transitional <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 標準 標準
<?xml version="1.0″ encoding="文字コード"?><!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 標準 互換
XHTML1.0Frameset <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 標準 標準
<?xml version="1.0″ encoding="文字コード"?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
標準 互換