出現在所有的移動瀏覽器的水平滾動條

我有一個非常簡單的網站，會在下面的一個水平滾動條：出現在所有的移動瀏覽器的水平滾動條

安卓：

鉻

火狐

的Opera Mini

不是在Android默認瀏覽器，但坐E視破

的iOS：

Safari瀏覽器

這真的沒什麼大不了的，但我比較我的網站的http://google.com完整的桌面網站和谷歌的網站沒有得到和我一樣的問題。

我在CSS和HTML方面還很新，我覺得我打破了一些非常簡單的規則，我不知道這是造成這個問題。有想法該怎麼解決這個嗎？

如果你想測試它。去http://natio.in

來源

2012-07-18 EGHDK

好吧，你可以包括overflow-x: hidden;在你的身體標記的樣式，但如果有超出手機寬度的內容，你將無法得到它。或者你可以創建一個包含媒體查詢的響應式佈局。

來源

2012-07-18 17:51:16 dezman

將它添加到我的身體中，但我仍然遇到問題。 – EGHDK 2012-07-18 17:59:08

你確定，因爲這條規則現在不在你的網站上。 – dezman 2012-07-18 18:03:34

是的，我現在把它放回去，但是我把它拿走了，因爲它不起作用。 – EGHDK 2012-07-18 18:12:30

水平滾動條出現是因爲您對元素設置了固定寬度，當在移動瀏覽器上查看網站時，這些元素的寬度設置得比視口寬度寬。如果您使用寬度的百分比，您的網頁將能夠相應地進行調整。

來源

2012-07-18 18:17:48 htmlMaster

好吧，我還好吧，它有滾動條，但我不明白爲什麼它創造了一個奇怪的效果與黑色酒吧去。這裏的屏幕截圖：https://docs.google.com/open?id=0B7D4SZeRrwSGcHU3Y0VELVVnSVE你可以看到黑色的橫條並沒有完全穿透。 – EGHDK 2012-07-18 18:38:37

它也可以由寬度爲100％的元素引起，這些元素也具有左側填充或右側填充（這會強制元素寬於100％）。爲了解決這個問題，'box-sizing'需要設置爲'border-box'。 – 2013-06-18 20:13:51

出現在所有的移動瀏覽器的水平滾動條

回答

相關問題