Win IE7のDTD とブラウザの表示モードについて

質問

いつもお世話になります。
いよいよ、最終段階のIE７ですが、IE6にはあった、
標準、互換のバグは解消されているのでしょうか？
（参照URL；http://www.redout.net/data/dtdmode.html）

それから、一番簡単に出来る、モード確認のテスト方法を
教えてください。

よろしくお願いします。

回答No.4

noname#19175

たしかline-heightの初期値はブラウザ依存だったと思います。

> <div style='background-color: red; width: 200px; height: 10px;'></div>
これはoverflowで解決させていました。
個人的にはheightを指定するときはoverflowも一緒に指定しています。
以下の問題でも一緒に対応できそうですから。（基本的にはheightは指定しませんが(^^;）

font-sizeとline-heightでも出来たんですね。
おそらくこれについては、IE7正式版でも同じ実装になると思います。
それに、IE7でGeckoと同じ描画になったからといって、結局IE6以下の対策は必要になってきますしね。

Geckoでは
ブロック要素に指定されたサイズよりも、そのコンテンツのサイズが大きくなった場合は、
ブロック要素のサイズは変更せずに、コンテンツだけをブロック要素のサイズを超えて描画させます。

<div style="background:red;height:2em;width:200px;">
あいうえおあいうえおあいうえおあいうえおあいうえおあいうえお<br>
かきくけこ<br>
さしすせそ
</div>

<div style="background:red;height:2em;width:200px;overflow:hidden;">
あいうえおあいうえおあいうえおあいうえおあいうえおあいうえお<br>
かきくけこ<br>
さしすせそ
</div>

> Second Acid Test
壮絶なソースに絶句(^^;

描画の違いのテストは、結局、そのブラウザで見てみる、ということにつきると思います。

お礼

情報ありがとうございます。
なるほど、overflowっていう策がありましたか、
知りませんでした。確かに、<div></div>内に文字が
ある時は、インラインスタイルを使い、しかも「!important」を
つけてやってました。（＾＾；）

IEだけがではなく、Safari、Gecko系もバグがあるからね。
でも、流石にMac IE（特にOS9）は、今後勘弁して欲しい。
アクセスログでは、OSXのIE合わせて、0.1％位だから。
だけどDTP関係から依頼がくると、みなさんOS９のIEで見るから
頭が痛いーー；）
overflow-x, overflow-y, filterのIE拡張機能は、
標準になって欲しいです。

回答No.3

noname#19175

追記で失礼します。

XHTMLでは、無条件に標準モードになるようですね。
IE6ではmarginが作られていますし、
とすると、IE7でmarginが作られないのはバグの可能性があります。

まぁ、そもそもβ版ですから、バグがあって当然かと。。。

システム的なバグやIE6.x以前からの変更点については、
http://msdn.microsoft.com/ie/releasenotes/default.aspx
にも書かれていますが、HTMLやCSSの描画、JavaScript/JScriptに関するバグは書かれていないようですね。
（たぶん、既知のバグの一部だと思いますが）

お礼

色々とありがとうございます。

僕は、殆どDHTMLでコーディングしており、
モードの違いによるCSSの制御に苦労したので、プラットフォーム
OS、ブラウザ・Versionなどを、PHPのサーバ変数を利用して、
DTDの対応をしています。（Mac IE5.xは、頭が痛いーー；）

それで、今後IE７は必須なので、それの対策に追われています。
ただ、まだIE７の<div>の概念は昔のままのようです。
通常、下記のコードの場合、IE以外は、期待通りに表示されます。
<div style='background-color: red; width: 200px; height: 10px;'></div>
しかし、IE（IE７含）では、
「font-size: 0; line-height: 0;」を追加しないと、まだ
駄目なようです。

でも、ブラウザとしては現代的なものになり、好感がもてます。
CSSのテストとしては、「Second Acid Test」というのがあり、
これは、MacOSX Safari 2.xだけパスしています。
Second Acid Test - URL
http://www.webstandards.org/files/acid2/test.html

これをIE7で実行してみると、かなりひどい状態のようです。
まだ、Firefox1.5xや、Opera8.5xの方が良いようです。

やはり、ファインダーとブラウザーが統合されている、
Windows OSに、無理があると思います。

回答No.2

noname#19175

http://cssbug.at.infoseek.co.jp/index.html
IEはもちろん、Netscape、Firefox、Opera、Safari、その他諸々、
バグが見つかったからといって、早々対応できるものではありませんし、
このリストに関する内容についても、対応がどうなるかはわかりません。

IE7をインストールしてないので検証は出来ませんが、
IE6では、
HTML Transitional (URLなし）では、bottomのマージンがありませんが、
HTML Transitional (URLあり) では、bottomのマージンがありました。
また、左右のmarginのautoについても、それぞれで表示が異なります。
これについては、DOCTYPEスイッチの通りではないでしょうか。
（URLなしでは、標準モードではなく互換モードになります。
互換モードではmargin-leftとmargin-rightをautoにしても、センタリングされません。）

> 他にも、いくつかおかしなCSSがありました。
おかしいと思われた点は報告される方が良いと思います。
開発者がバグを見つけるのが少しでも早ければ、それだけ早くバグを修正できますから。
正式版で直ってると良いですね。

回答No.1

noname#19175

標準、互換のバグとはどういうものでしょうか？

DOCTYPEスイッチはバグではありませんし、
IE6や、IE5.x以下を使われている方も少なからずおられるので、
IE6や公表と異なったDOCTYPEスイッチが実装されると、その方が困ることになりそうです。

> モード確認のテスト方法
モード確認というのはどういうことをテストすることなのでしょうか？

お礼

どうも応答ありがとうございます。
IEのモード確認方法は、参照URLに書いてありました。
XHTML1.0 Transitional　でしか検証してませんが、
正常に戻っているようですね。ただIE7b2で、
#zoneEx
{
color: #348ded;
display: block;
height: 50px;
width: 240px;
margin: 0 auto 20px auto;
background-color: #ddd;
}
でボックス作ったら、マージンのbottomが効いていませんね。
他にも、いくつかおかしなCSSがありました。
IE6よりは良くなったけれど、まだまだかな。