忍者ブログ
[587] [588] [589] [590] [591] [592] [593] [594] [595] [596] [597]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

 新規HPにBLOCKBLOGで作成したソフトメニューを設置し、
DOCTYPEをXHTML1.0に変更したら、なぜかソフトメニューの横幅が小さくなり
隣との間に隙間が。。^^):::

えっなんでということで、調べていたら、どうもXHTML1.0とHTML4.01で
DIV領域に指定したwidth値に対して、
borderで指定した枠線が、
DIV領域の内側に配置されるか、外側に配置されるかが異なるようだ。

で、この際、他のブラウザ、他のDOCTYPE指定を調べてみた。

その結果、IEはなんか特殊なのか、昔のお客さんを大事にしているのか
ちょっと、ブラウザで対応が異なるようだ。

仕様を調べてみたら、CSS1CSS2も、
枠線はBLOCKの内容要素の外側に配置されるのが正しいですね。

ということは、IEでXHTML1.0が問題。
HTML3.2以前は仕方ないにしても、
XHTML1.0/1.1まで悪しき仕様を持ち込まなくてもいいんじゃないのかな??

ということは、どういう事かと言うと、
DOCTYPEの指定如何では、
ブラウザが異なると、デザインが違って表示されることがある。
さらに領域に余裕がないとデザインが崩れてしまうことがある。

困った。。。。^^);;;

XHTML1.0を指定したいが、そうすると、殆どがIEで見に来るので
IEに合わせてCSSを指定すると、IE以外のブラウザでは、
デザインが大きく崩れてしまう。

ということで、涙を飲んで、HTML4.01 Traditionalで作成することに決めた。
BLOCKBLOGさんがHTML4.01にしてたのが気になっていたが
こういうことが原因なのかな?

あきさんがコメントくれて、泣かなくてもいいみたい。
IE6の場合は、先頭の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回]

PR

コメント


コメントフォーム
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード
  Vodafone絵文字 i-mode絵文字 Ezweb絵文字


トラックバック
この記事にトラックバックする:
忍者ブログ [PR]
カレンダー
09 2017/10 11
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
フリーエリア
[-]最新トラックバック
プロフィール
HN:
7maru
性別:
非公開
自己紹介:

バーコード
ブログ内検索
[+]アーカイブ
アクセス解析