1

In my first attempt at a responsive web design I have run into a curious problem. When I resize my browser down to 615px width or less, a horizontal scroll bar appears. I'm not sure what element is causing this. I tried putting a border around each element using 

* {
    border:1px solid #FFF;
}

to help me visualize where the edges of the elements were but I don't see any borders extending beyond the window boundaries.

Can someone take a look at my site and give me some insight? http://www.ritualbliss.ca

Thanks!

Edit: So I only get the scroll bar in Firefox. Chrome works fine and the desktop version of Safari but on my iPhone it scrolls horizontally.

Edit: the site is for a legitimate massage business but some may consider the picture NSFW

4

3 に答える 3

1

デヴィン、

Firefox用のFirebug、IE Developer Tools、ChromeDeveloperツールなどのツールを使用してみてください。SafariとOperaにも同様のツールがあると思います。これらにより、JavascriptやCSS情報など、ページに表示されているすべてのHTML要素のさまざまなプロパティを強調表示して表示できるようになります。

もう1つ考慮すべきことは、CSSで*セレクターを使用しないことです。私には視覚的に魅力的に見えないので、なぜページ上のすべての要素の周りに境界線を付けたいのかわかりません。境界線スタイル属性は、適用される寸法に境界線の太さを追加します。したがって、あなたの場合、ページ内のすべての要素には、「html」要素も含めて、高さと幅の両方に2pxが追加されています。これが、スクロールバーがあるのに、余分なピクセルがどこにあるかわからない理由である可能性があります。

また、幅または最小幅を617ピクセルに設定するCSSスタイルはありますか？または、同じ領域を共有し、合計で617ピクセルになる要素の組み合わせですか？たぶん、縮小できない列を持つテーブルですか？

見るべきことがたくさんあり、あなたのURLはおそらくポルノか何かのように見えるので、私は仕事でそこに行ってそれをチェックすることができません...

幸運を、

  • マット

編集

私は数分間firebugにだまされ、オーバーフローを処理するのが良い考えであるとRubenに同意します。設定は#contentではなくbodyにあるべきだと思いますが。

これを試して：

body { overflow-x: hidden; }

ルーベンの答えのように、それはオーバーフローを隠していますが、人々が本当にブラウザを絞り込んだ場合でも、垂直スクロールバーを取得できます。

于 2012-07-26T14:54:25.627 に答える
0

nsfwのときに警告してください：sこのcssを使用してください：

#content { overflow: hidden }

最善の解決策ではありませんが、Firebugを使用して、パディングと境界線が突き出ているものを見つけて
、要素の幅を広げる必要があります

于 2012-07-26T15:04:26.370 に答える
0

css3 box-sizing：border-boxはこれを解決しました。

于 2013-01-22T22:45:51.520 に答える