忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[129] [128] [127] [126] [125] [124] [123] [122] [121] [120] [119

[PR]

×

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

IE標準モードとclearfix

先日MTで作業をしていると、
IE6以下でヘッダーとフッター以外のコンテンツ部分が消失しているという事態に遭遇。
ソースを見るとコードは確かにあるのですが、なぜか見えない。なぜか。

ネットで調べると、テンプレートの改行するしないが表示に影響する?とのこと。
さっそくやってみようと思っていたところ、
CSSが原因じゃない?」と同僚に言われ。

そのとおり、でした。

ヘッダー内のフロートがclearされていなかったため、その下のコンテンツ部分が消失してしまったようです。


フロートを上手く解除する方法に、clearfixっていうのがありますが、
最近はclearfixではなく、display: inline-block; のみを指定していて、特に問題がありませんでした。
私によるclearfix

ちなみにclearfixは、floatしてるボックスの親要素に指定します。


今回のMTブログでも、親ボックスにdisplay: inline-block;を指定して解決!と思っていたのですが、そうはなりませんでした。
理由は、「DOCTYPEスイッチによりIE6が標準モードになっていた」から。

補足を入れると、DOCTYPEというのは、HTML文書の先頭につける、文書型のことです。このDOCTYPEの記述が変わることによって、ブラウザの表示が変化するので、DOCTYPEスイッチと表現されているのではないかなという解釈です。

詳しくは、hxxp.jpさまのリソースをご確認ください。


実は、今までXHTMLでサイトを作るときはほとんどXML宣言をつけていたので、
IE6以下では表示が互換モードだったんです。それを見越して今まで制作していました。
が、MTテンプレートはXML宣言がついていないため、IE6では標準モードになります。
よって、ちょっと表示が異なっていたのですね。

そこで、display: inline-block;に加えてheight: 1%;
(たぶん、何かしら高さを指定すればOK)を指定したら直りました。

解決。


P.S アドバイスくれたlevaさんありがとう。

PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
無題
いえいえ、アドバイスといえるところまではしていませんよ。

弊社のウェブ標準サービス関係の案件で作られたサイトのソースを何件か覗いてみましたが、どこもXML宣言抜きで運用していて、IEでは標準準拠モードで動作するように設計されていますから、標準準拠の振る舞いに慣れていた方がよいみたいですね(正確な運用状況は確認していただきたいですが)。
leva URL 2009/04/19(Sun)15:41:51 編集
Re:無題
いえいえ、あやうくMTテンプレートを全部初期化して調整する予定だったんで、言ってもらえて助かりました(笑)

そうそう、基本はXML宣言なしで制作する感じなので、これから気をつけて組んできたいと思いますです。
【2009/04/19 18:48】
この記事へのトラックバック
この記事にトラックバックする:
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
11« 2017/12 »01
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
ブログ内検索
忍者ブログ [PR]