[経緯]
スクロールされないテキストボックス(SNSみたいな)を表示するにあたり、IE8ではうまくスタイルシートが適用されない事に気が付きました。ふだん使用しているChromeでは、正常に動作するのですが、cssの記述や、HTML側の表記を何度調べてもうまくいかない。で、ネットで調べると、IE8では、strictモードに設定しないと、「potition:fixed」が動作しないとでてきました。
[解決方法]
①HTMLの先頭に
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">を記述します。IE8では、「position:fixed」がサポートされているが、これが作用するのはstrictモードのときだけで、transitionalモードのときは「position:fixed」が有効にならないと言う事なので、この様に記述するそうです。これにより、IE8ではstrict宣言だけが有効になり、他のブラウザではtransitional宣言だけが有効になるということです。②<head>内に
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> を記述します。このタグは、strictに書かれたページをlooseに解釈してレンダリングするようIEに示唆するものだそうです。
[その他]
これをHTML文書に、付け加えたところ、「potition:fixed」だけでなく、ストライプテーブルも動くようになり、もやもやもすっきりしました。IE9にすればよいのですが。
[出典]
喚いて叫ばざれば「IE8でtransitionalなページでposition:fixedを使う」
0 件のコメント:
コメントを投稿