2012-02-13 11 views

答えて

2

問題は.slideshowの定義(style.css:199 ...)にあります。

ブラウザは式解決しようとする:

left 
+ margin-left 
+ border-left-width 
+ padding-left 
+ width 
+ padding-right 
+ border-right-width 
+ margin-right 
+ right 
= parent width 

およびleftが50%であり、widthが100%であるので、失敗します。 margin:-800pxの使用は、(1920 * 1.5 - 800)が2080で、そのサイズのデバイスでは広すぎるため、ディスプレイ幅が1920ピクセルのデバイスでは役に立ちません。

widthが100%の要素を暗黙的に作成するため、次の定義を代わりに使用してください。

.slideshow{ 
    z-index: -9999; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
} 

CSS Positioned Layout Module Level 3: Section 7.1も参照してください。上記の手法を使用しても、ディスプレイの幅が1024px未満のユーザーはスクロールバーを持つことに注意してください。この問題については、body{overflow-x:hidden;}を試してください。

あなたの古いコード(唯一の補完のためにそれを使用しないでください!):

.slideshow{ 
    z-index: -9999; 
    position: absolute; 
    top: 0; 
    left: 50%; 
    width: 100% !important; 
    margin-left: -800px; 
} 
+0

**最後に誰かが根本的な原因になります** 1 ..おそらく199行目のCSSルールも表示されます。それは混乱です...左:50%; margin-left:-800px;他の何かを補うために巨大な負のマージンを使っていることが分かった場合、元の方法を最初から再検討する必要があるかもしれません。 – Sparky

+0

@ Sparky672:古いコードが含まれており、少し説明が追加されました。私は本当に貴重なCSSコードになる可能性のある脆弱な線の間のどこかに問題があるときに、なぜそんなに多くの人々があまりにも単純なハックを使用しようとしているのかわからない... – Zeta

+1

私はそれが常にベストだと思うすべてのCSSルールをリセットしてオーバーフローを隠すというこのブランケットのアプローチではなく、何かをしなければならないということを知っています。真剣に、それについて考えてみましょう...あなた自身のルールを適用するたびにデフォルトのCSSを本質的に「リセット」します。 3行後に 'pに' margin:0; 'を適用するのはうんざりです。あなたは' p'に自分のマージンを適用するだけです。 – Sparky

1

これは、devtoolsで試したものです。

body { overflow-x: hidden; } 
1
overflow-x:hidden; 
overflow-y:auto; 

それを行う必要があります。

またはそれをサポートしていない可能性がありますブラウザをカバーするために、安全のために:

overflow:auto; 
overflow-x:hidden; 
+0

うん、これは基本的には=それを解決) – imjp

0

氏Pallazzoが言ったようにあなたが行うことができますが、これは右側に、すべてのコンテンツを切り落とすます(つまりあなたはおそらく望んでいない)を見るためにスクロールする必要があります。ラッパーのdivなどの幅の仕様を見てください。wraperという名前のdivは、widthが1003pxに設定されています。このような絶対的な条件でディメンションを設定するのではなく、パーセンテージを使用することをお勧めします。

関連する問題