【IE8】min-widthが適用されない【CSS】
IE8でCSSのmin-widthタグが適用されない場合の対処法
min-width使用上の注意点
ボックスの最小の横幅を設定するmin-widthタグは、次の条件を満たすのIEでは適用されません。
- Internet Explorer 5やIE6などの古い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"> |
標準 | 互換 |