1

このページを作成しています: http://ss.rsportugal.org/

ご覧のとおり、ページには 10 ピクセルの影が 2 つあります。1 つはメニューのすぐ下、もう 1 つはフッター バーのすぐ上です。これらの影はbox-shadow: 0 0 10 rgba(...);

#headerこれは WebKit エンジンで期待どおりに動作し、何らかの理由で把握できず、これに新鮮な目を向けることができました。Gecko と Opera は幅に 5 ピクセルを追加#footer-containerし、本体に水平スクロールバーを表示します。ボックスの影を削除しても問題なく動作しますが、それを維持したいのです。):

4

3 に答える 3

2

これは、幅を 100% に設定しているため、box-shadow が追加された後、100%+10px (10px が 2 つの側面に分割されます) になります。position:fixed;ヘッダーにも使用した場合、問題はありません。ちなみに、Safariでも同じことをしているので、webkitは影響を受けます。あなたができることは、それらをコンテナにラップし、それを100％に設定してからoverflow:hidden、内側の要素で必要に応じてボックスの影を100％にすることです..このようにして、左側/右側から切り取られます.

何かのようなもの：

<style type="text/css">
  #header {
    background:none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
    left:0;
    overflow:hidden;
    position:absolute;
    top:0;
    width:100%;
    z-index:4;
  }
  #header-inner {
     width: 100%; 
     -moz-box-shadow: 0pt 0pt 10px rgb(0, 0, 0);
  }
</style>
<div id="header">
<div id="header-inner">
    <div id="logo">
        ...
    </div>
    <div id="menu-background"></div>
    <div id="menu-wrapper">
        ...
    </div>
</div>
</div>
于 2010-10-12T00:34:23.027 に答える
0

すでにサイトを修正しているようですが、これは先週修正を加えた既知のバグのようです（したがって、修正はFirefox 4ベータ8にあるはずですが、ベータ7はまだ出荷されていません）。 。

于 2010-10-12T05:21:29.540 に答える
0

box-sizing プロパティをチェックしてみてください。

Webkit は、ボックスのサイズ設定に FF とは異なるボックス モデルを使用します。IE はどちらとも異なります。

すべてのブラウザーに対して同じ種類を宣言することを確認し、すべてが同じボックス モデルで処理されるようにする必要があります。

于 2010-10-12T00:33:53.613 に答える