2014年3月13日木曜日

PCソフトウェア＞IE8とchromeでスタイルシートの適用に違いがある?（1）

Webで公開されている、様々なスタイルシートを試している内に、ブラウザが違うと(IE8とChromで)動作したりしなかったりの事例に遭遇しました。その中で、今回は、「potition:fixed」について調べてみました。
[経緯]
スクロールされないテキストボックス(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 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)