6

過去 1 日か 2 日かけて作成したページを磨き上げていて、box-shadow を使用した後に問題が発生しました。誰かがこれを簡単に修正する方法を教えてくれることを期待していました。

セットアップ: width、max-width、box-shadow など、いくつかのプロパティを持つ div があります。

#mydiv {  
       width:100%;
       max-width:1200px;
       -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
       -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
       box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
}

問題: 「box-shadow」プロパティにより、div 要素の幅が 40 ピクセル (両側で 20 ピクセル) 追加されます。コンテンツが 100% 幅の属性に達するほど画面が小さい場合、水平スクロール バーが表示されます。CSS を掘り下げた後、div が技術的には width: 100% + 40px; のようなものだったことが原因であることがわかりました。

私が試したこと: 親divにoverflow:hiddenを設定することを検討しましたが、コンテンツにアクセスできなくなる最小幅を設定しています。また、box-shadow CSS のサイズ引数にパーセンテージ (たとえば 1%) を使用して、div の幅を 98% に設定しようとしましたが、box-shadow CSS はパーセンテージを受け入れないようです。サイズ。また、javascript を使用してブラウザーの幅をテストし、それに応じて box-shadow 要素を表示または非表示にすることも検討しましたが、最適なソリューションとは思えません。

これを処理するためのより簡単な方法が必要です。考え？

4

2 に答える 2

9

ブラウザのバグです。

仕様はこれについて不明確でしたが、その後、影がスクロールをトリガーしてはならないことを明確にするために文言が追加されました。

影はスクロールをトリガーしたり、スクロール可能な領域のサイズを拡大したりしません。

しかし、この初期の省略の結果として、ほとんどのブラウザーはシャドウのスクロールをトリガーしました。これは、最近のすべてのブラウザで修正されました。

古いブラウザでは、スクロールバーoverflow-x: hiddenを使い#mydiv続けるか、何かを壊さないように追加するか、別の方法で影を追加する (例えば、古き良き PNG を使用する) 必要があります。

次の 2 つの関連する質問も参照してください。

于 2011-01-07T17:11:08.800 に答える
0

ボックス シャドウのある可変幅サイトでのスクロール バーの問題に対する回避策があります。

CSS に @media 命令を追加すると、ブラウザー ウィンドウが特定の幅になったことを検出できます (最新のブラウザーはこれをサポートしており、IE9 もサポートする必要があります)。

たとえば、max-width が 940px に設定された中央揃えの pagewrap div の場合、これをスタイルシートに追加してみてください。

@media スクリーンと (最小幅: 998px) { div#pagewrap { -moz-box-shadow: 3px 8px 26px #a1a09e; -webkit-box-shadow: 3px 8px 26px #a1a09e; ボックスの影: 3px 8px 26px #a1a09e; } }

@media css の最小幅 998px は、スクロール バーをトリガーする直前にドロップ シャドウを非表示にするためのものです。

于 2011-01-29T20:16:54.093 に答える