![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
winXP環境、xhtml+cssでwebページを作成していますが、壁にぶち当たっています。
親ボックスの中に2つの子ボックスをfloatでレイアウト、というよくあるパターンですが、親ボックスにclearfixを指定しているのにIE7で表示すると、floatさせたdivが親ボックスからはみ出した状態で表示されます。
Firefox3/IE6/IE8で表示確認すると問題なく表示されます。
■htmlソース
http://bangn.web.fc2.com/testpage.html
■CSSソース
http://bangn.web.fc2.com/css/default.css(デフォルトスタイルリセット用)
http://bangn.web.fc2.com/css/base.css(divレイアウト、clearfix)
http://bangn.web.fc2.com/css/kakunin.css(レイアウト確認用に各divのborderを黒くしたもの)
htmlの書き方がおかしいのか?clearfixの記述がおかしいのか?とソースを何度も見直ししましたが、解決に至らず困っております。
どなたかアドバイスをいただけないでしょうか?
よろしくお願いいたします。
No.2ベストアンサー
- 回答日時:
これが原因ですね。
/* for IE6 and below */
*html
.clearfix,
#mainPanel,
#contentPanel {
height: 1px;
/*\*//*/
height: auto;
overflow: hidden;
/**/
}
縦幅を1pxにしないといけないのは、
.clearfixを単体で使用したい場合だけな気がします。
(それもあまりよい使い方とはいえませんが。。)
#mainPanelや#contentPanelの縦幅を1pxにしないといけない理由がなければ、
/* for IE6 and below */
.clearfix{
height: 1px;
}
としたほうがよさそうです。
なにか問題が起こるようでしたら、
IE7ハックや条件付コメントでIE7のみheightをautoにしてみてはいかがでしょう。
*:first-child+html #mainPanel,
*:first-child+html #contentPanel {
height:auto;
}
No.1
- 回答日時:
.clearfix,
#mainPanel,
#contentPanel {
display: block;
}
inlineblockをいきなりblockで上書きしてるけどこれ必要ですか?
あと関係ないけど
/* for IE6 and below */
の* htmlが.clearfixにしかついてないのおかしくないですか?
この回答への補足
> inlineblockをいきなりblockで上書きしてるけどこれ必要ですか?
display: inline-block; だけですと
Firefoxでレイアウトが崩れる為、そちら方面の対策にしてます。
参考ページ:「inline-blockの奇妙な世界」
http://norisfactory.com/stylesheetlab/000039.php
早速のご回答、ありがとうございました。
> /* for IE6 and below */
> の* htmlが.clearfixにしかついてないのおかしくないですか?
ご指摘のとおりです。
第3者の目で見ていただいてやっと凡ミスに気づことができました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS HTMLとCSS(ブラウザ関連)について質問です。 1 2023/03/07 08:07
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- HTML・CSS HTMLを正しく表示させるには 2 2023/06/18 09:12
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
タグの閉じ忘れチェック
-
VBAで#Regionに変わるものは無...
-
Visual Source Safe?
-
Mcユーザーに私のHPを見てほしい
-
VB詳しい方
-
TurboLinuxにて、スペースアル...
-
【VC++6.0(MFC)】Access Violat...
-
画像と文字が重なって表示される。
-
HTMLの内容をそのままブラウザ...
-
ホームページビルダーと手打ち
-
FC2ブログでスタイルシートのUR...
-
【左】【中央】【右】に分ける...
-
細線化について‥
-
htmlのタブの色変更について
-
ホームページの文字化け
-
…カウンター設置方法…
-
HTMLタグチェック
-
HTMLでフレームを作っているん...
-
リンクのタイトルを表示させるには
-
レストラン、英語のメニュー表記
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
時間ごとにリンク先を変更させたい
-
レストラン、英語のメニュー表記
-
VBAで#Regionに変わるものは無...
-
Dreamweaverのコードカラーが黒...
-
コメントが閉じてないというエ...
-
#ifdef多用でソースが見づらい
-
ソースの追加行数と変更行数
-
htmlのタブの色変更について
-
JSPの実行結果をHTMLに変換
-
「MicrosoftVisualBasic6.0 行...
-
画像と文字が重なって表示される。
-
プログラム時のヘッダコメント...
-
縮小版のサムネイルの取得(画像...
-
実行オブジェクトからソースを...
-
【VC++6.0(MFC)】Access Violat...
-
VisualBasicがインストールされ...
-
Visual Source Safe?
-
phpとaspの違い? 実力の違い?
-
HTMLソースの文字コードがutfの...
-
VisualStudio2010でデバッグソ...
おすすめ情報