旧フォーラムの記事です http://blog.fc2.com/forum/viewtopic.php?f=3&t=9971
2006-05-03 15:37:42
件名 :FireFoxでメニューの背景画像が切れます。
OS:WinXP
ブラウザ環境: IE6、Opera8.54、FireFox1.5.0.2
使用テンプレート名: 公式sampleをカスタマイズしたもの
ブログURL:http://tsrr.blog62.fc2.com/
一般
公式テンプレートのsampleを変更してページをつくっていたのですが、IE6で表示されるメニューの背景画像がFireFoxで表示すると切れます。Operaでは画像とテキスト位置の解釈の違いからかぐちゃぐちゃでした。
せめてFireFoxで画像が切れなければいいといじっているうちにレイアウトも崩れてしまいました。
下にCSSのレイアウト関係の部分を載せましたのでどなたかご教授ください。
div#container {
width : 760px;
position : relative;
background-color : transparent;
}
div#branding {
position : relative;
z-index : 100;
height : 160px ;
}
div#navigation{
position : absolute;
left : 20px;
top : 110px ;
z-index : 100;
width : 100%;
}
div.column { margin : 15px 0;
/* タイトル部分と記事、記事部分とフッター分の間隔 */
}
div#wrapper { position : relative;
top : 0px; left : 0px;
width : 100%;
}
div#center{
margin : 0 160px;
width : 380px;
padding : 0 20px;
/* パディング */
voice-family : "\"}\""; /* おまじない */
voice-family : inherit; /* おまじない */
}
div#primary-column {
}
/* アーカイブ関連ブロック */
div#secondary-column {
position : absolute ;
left : 0px;
top : 0px;
width : 160px; }
/* アーカイブ以外のブロック */
div#extra-column {
position : absolute ;
right : 0px;
top : 0px;
width : 160px;
}
/* 著作表示ブロック */
div#siteinfo-legal {
clear : both;
/* 回り込みを解除 */
margin : 0 10px;
}
このコミュニティにご参加頂くと、コメントの書き込みができます
Copyright(c)1999 FC2, Inc. All Rights Reserved.
@fc2infoさんをフォロー
cyaimi 2006-05-03 22:54:19
件名 :
Googleなどで「ボックスモデルハック」で検索して対処法を探してみると良いかも。
主にボックス内でwidth、heightで指定している箇所を中心に記述を改めることになると思います。
ちょうどさっきまで同じようなことで私も勉強してました。もうちょっと軽症でしたが、かなり難儀。
(何せ「IEのCSSのバグ」については知っていましたが、実際には何もしたことがなかったので
ほぼ「1から勉強」状態でした)
参考:http://members.at.infoseek.co.jp/cssbug/detail/winie.html