2016-12-02 1 views
1

モバイルレイアウトでhttps://www.biznessapps.comにアクセスした場合は、Google Chromeの要素を調べ、bodyからoverflow-x: hiddenを無効にしてもう一度サイズを変更すると、右側に白い縦縞(パディング)が表示されます。モバイルレイアウトで奇妙なボディパッディング

これを隠すために身体にoverflow-x:hiddenを追加する必要がありましたが、これを引き起こす原因は不明です。 overflow-x:hiddenを使用する以外の方法はありますか?

enter image description here

+0

エミュレーションモードに入ってからページをリフレッシュしようとしましたか? (クロームデバッグは良いですが、いくつかの癖があります。たとえば、スクロールバーにページをリフレッシュしてモバイルモードに変更する必要があります) – DBS

答えて

4

は実行可能なソリューションですが、あなたは幽霊の要素をデバッグする方法を学習したい場合は、下記の読み:

基本的に、私はあなたのサイトをデバッグしてのいくつかを見ましたあなたのセクション(主に2または3の列にある浮動小数点数)は、ラッパーの幅を超えて拡張されます。あなたは

*{ 
    background: #000 !important; 
    color: #0f0 !important; 
    outline: solid #f00 1px !important; 
} 

下にスクロールして、あなたのCSSにこれを入力することにより、同様にこれを見ると、このような、メインのdivを過ぎて延長セクションを探すことができます:extended section

は、これらのほとんどは少しの結果であります余分なマージンや浮動小数点数の埋め込み。


  • 私が言ったように、width:100%;overflow-x:hidden;が、これはあなたが構造を修正したい場合は、それをデバッグするだけの方法です、まだ非常に一般的な解決策です。

+0

あなたの種類のデバッグと推奨に感謝します! –

0

これは、スクロールバーです。オーバーフローのためのデフォルトの動作は、スクロールバーを追加することですので、

overflow-x: visible;

は行くための正しい方法かもしれません。あなたはoverflow-x溶液で行っているので、何

+0

私は同意します。それはうまく動作します。 –