新規ＨＰにBLOCKBLOGで作成したソフトメニューを設置し、
DOCTYPEをXHTML1.0に変更したら、なぜかソフトメニューの横幅が小さくなり
隣との間に隙間が。。^^):::
えっなんでということで、調べていたら、どうもXHTML1.0とHTML4.01で
ＤＩＶ領域に指定したwidth値に対して、
borderで指定した枠線が、
ＤＩＶ領域の内側に配置されるか、外側に配置されるかが異なるようだ。
で、この際、他のブラウザ、他のDOCTYPE指定を調べてみた。
その結果、ＩＥはなんか特殊なのか、昔のお客さんを大事にしているのか
ちょっと、ブラウザで対応が異なるようだ。
仕様を調べてみたら、ＣＳＳ１もＣＳＳ２も、
枠線はBLOCKの内容要素の外側に配置されるのが正しいですね。
ということは、ＩＥでXHTML1.0が問題。
HTML3.2以前は仕方ないにしても、
XHTML1.0/1.1まで悪しき仕様を持ち込まなくてもいいんじゃないのかな？？
ということは、どういう事かと言うと、
DOCTYPEの指定如何では、
ブラウザが異なると、デザインが違って表示されることがある。
さらに領域に余裕がないとデザインが崩れてしまうことがある。
困った。。。。^^);;;
XHTML1.0を指定したいが、そうすると、殆どがＩＥで見に来るので
ＩＥに合わせてＣＳＳを指定すると、ＩＥ以外のブラウザでは、
デザインが大きく崩れてしまう。
ということで、涙を飲んで、HTML4.01 Traditionalで作成することに決めた。BLOCKBLOGさんがHTML4.01にしてたのが気になっていたがこういうことが原因なのかな？
あきさんがコメントくれて、泣かなくてもいいみたい。
IE６の場合は、先頭のxml宣言取れば、確かに外側に配置してくれました。
| IE | Mozilla | opera | safari | |
| XHTML 1.1 (non xml) | 外 | 外 | 外 | 外 |
| XHTML 1.0 Strict(non xml) | 外 | 外 | 外 | 外 |
| XHTML 1.1 | 内 | 外 | 外 | 外 |
| XHTML 1.0 Strict | 内 | 外 | 外 | 外 |
| HTML 4.01 Strict | 外 | 外 | 外 | 外 |
| HTML 4.01 Transitional | 外 | 外 | 外 | 外 |
| HTML 3.2 | 内 | 外 | 内 | 外 |
| DOCTYPEなし | 内 | 外 | 内 | 外 |
内側：BLOCK要素横幅(marginは除いています）：
＝width
外側：BLOCK要素横幅(marginは除いています）：
＝border-left-width + padding-left-width
+ width
+ padding-right-width + border-right-width
確認環境：
IE 6.0----------------DOS/V WinXP
Mozilla 1.8a4---------DOS/V WinXP
opera 7.23------------DOS/V WinXP
Safari 1.2.2(v125.7)--PowerBook G4(Mac OS X Ver10.3.4)
テスト用ソース：
<?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>BLOCK要素チェック</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> .s400 { font-size: 20px; margin-left: 0px; background: #ffffff; padding: 0px; border: 1px solid #000000; width:400px; } .s200 { font-size: 20px; margin-left: 40px; background: #ffffff; padding: 0px; border: 1px solid #000000; width:200px; } .s100 { font-size: 20px; margin-left: 80px; background: #ffffff; padding: 0px; border: 1px solid #000000; width:100px; } .d1 { margin: 0px; background: #ccccff; padding: 20px; border: 20px solid #000000; width:400px; } .d1 .d2 { margin: 0px; background: #eecccc; padding: 20px; border: 20px solid #000000; width: 200px; } .d1 .d2 .h1 { margin: 0px; background: #cccccc; padding: 0px; border: 1px solid #000000; width: 100px; } </style> </head> <body> <div class="s400"><p>400px</p></div> <div class="s200"><p>200px</p></div> <div class="s100"><p>100px</p></div> <div class="d1"> <div class="d2"> <h1 class="h1">ツール</h1> </div> </div> </body></html> 
[0回]
