0

これは本当に単純なはずです...ここに何が表示されていないかわかりません...背景画像はIE以外のブラウザでは問題なく繰り返されますが、IE8では失敗します。

サイト：http ：//www.erisdesigns.net/Stage/McCampbellInsurance/index.html

#wrapper {
    max-width:100%;
    min-width:1000px;
    min-height:100%;
    margin:0 auto;
    background-image:url(images/shadowborder.png);
    background-repeat:repeat-y;
    background-position:center;
    margin-bottom:-70px;
    position:relative;
    overflow:auto;
}

#headwrapper {
    position:relative;
    -moz-background-clip:border;
    -moz-background-origin:padding;
    -moz-background-size:auto auto;
    background-image:url(images/btr_rpt.jpg); /* NO REPEAT!!! */
    background-repeat:repeat-x;
    height:150px;
}

#header {
    position:relative;
    -moz-background-clip:border;
    -moz-background-origin:padding;
    -moz-background-size:auto auto;
    background-color:transparent;
    background:url(images/KMIAFS_banner.jpg) center top no-repeat;
    height:150px;
}

#menu {
    clear:left;
    float:left;
    padding:0;
    border-top:5px solid #003a72;
    width:100%;
    overflow:hidden;
    height:70px;
}

#spacer {
    height:70px;
    clear:both;
}

#footer {
    position:relative;
    height:70px;
    width:100%;
    border-top:5px solid #003a72;
    background-color:#bec8e3;
    text-align:center;
    color:#666;
    margin:0 auto;
    margin-top:-70px;
    clear:both;
}

HTML：

</head>
<div id="wrapper">
<div id="headwrapper">
<div id="header"></div>
     <div id="menu">
       <ul>
          <li class="active"><a href="#" title="">/a></li>
          <li><a href="#" title=""></a></li>
          <li><a href="#" title=""></a></li>
          <li><a href="#" title=""></a></li>
          <li><a href="#" title=""></a></li>
          <li><a href="#" title=""></a></li>
          <li><a href="#" title=""></a></li>
       </ul>        
         </div>
</div>
</div>
4

2 に答える 2

1

width 100%;に追加#wrapper

#wrapper { width: 100%; }

それは機能しますか？

于 2010-07-01T20:32:48.903 に答える
0

ヘッダー画像が1000pxより大きく伸びないことについて話しているのですか？その場合、これは背景の問題ではなく、要素のサイズが原因です。

これは、インラインスタイルシートのルールdisplay: tableがオン#wrapperになっていることが原因であると思われます。これにより、縮小してフィットする動作が発生し、1000ピクセルに縮小されmin-widthます。ラッパーの内容はテーブル行要素ではないため、このルールは意味がありません。width: 100%固定幅中心のラッパーの外側にあるヘッダー画像と、ページを埋めるためのプレーンを使用したほうがよいでしょう。

そのスタイルシート自体は、7を除くIEのすべてのバージョンに影響を与えるダウンレベルの非表示の条件付きコメントにあります。これは悪い考えのようです...それは本当にあなたが意味したことであり、display: tableハックで何を達成しようとしていましたか？すべての-moz-ルールも完全に不要に見えます。これは、ハックを必要としない単純なレイアウトです。

余談ですが、ファイルの先頭にXML宣言も含めています。HTML互換のXHTMLの場合は、これを省略することをお勧めします。これにより、IE6がQuirksモードにフォールバックし（IE6の通常よりもレンダリングが悪くなります）、いずれの場合も、UTF-8でXML1.0のみが指定されます。とにかくデフォルト、それは無意味です。HTML互換XHTMLの場合、代わりにタグcharsetでパラメーターをUTF-8に設定する必要があります。<meta http-equiv="Content-Type">

于 2010-07-01T20:41:54.683 に答える