html頁(yè)面，在瀏覽器中突然出現(xiàn)右邊空白一塊，怎么回事？
時(shí)間：2024-01-15 19:18:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2024-01-15 19:18:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)
html頁(yè)面，在瀏覽器中突然出現(xiàn)右邊空白一塊，怎么回事？：剛好寫(xiě)了一篇文章是關(guān)于這個(gè)問(wèn)題的，希望可以幫到大家。
很多新手在寫(xiě)CSS會(huì)遇到很多問(wèn)題，比如發(fā)現(xiàn)頁(yè)面右側(cè)出現(xiàn)了很多空白。你在網(wǎng)上搜索了之后，發(fā)現(xiàn)使用這行代碼可以解決：
body, html { overflow-x: hidden;} 但是雖然滾動(dòng)條被隱藏了，問(wèn)題并沒(méi)有解決，你還是不知道是哪個(gè)元素在作怪。而且，隱藏了x向的滾動(dòng)條會(huì)導(dǎo)致很多副作用，比如縮小瀏覽器后無(wú)法滾動(dòng)。
一個(gè)方便的CSS調(diào)試工具最佳的解決方法是使用一個(gè)CSS調(diào)試工具來(lái)把出問(wèn)題的元素揪出來(lái)。因?yàn)楸菊緦跊](méi)法放鏈接，你可以訪問(wèn)
http://greyli.com/ghost.html ，點(diǎn)擊頁(yè)面第二行的鏈接（Click me……），然后看看發(fā)生了什么……
如果你使用Chrome瀏覽器，那么可以試試這個(gè)GhostPage擴(kuò)展。
使用方法你可以拖拽這個(gè)鏈接到你瀏覽器的書(shū)簽欄（或是使用上面提到的Chrome擴(kuò)展），然后在任一個(gè)打開(kāi)的頁(yè)面，都可以通過(guò)點(diǎn)擊這個(gè)書(shū)簽來(lái)查看整個(gè)頁(yè)面的元素結(jié)構(gòu)。比如一開(kāi)始我打開(kāi)本站的主頁(yè)，是這樣：
當(dāng)我點(diǎn)了這個(gè)書(shū)簽，頁(yè)面就變成了這樣：
很神奇吧？（不用擔(dān)心，刷新一下，頁(yè)面就會(huì)恢復(fù)正常）
其實(shí)原理很簡(jiǎn)單，只是在頁(yè)面的CSS文件里加入了這幾行代碼：
* { background: #000 !important; color: #0f0 !important; outline: solid #f00 1px !important;}更改所有元素的背景，顏色和邊框（你可以通過(guò)修改書(shū)簽的鏈接內(nèi)容來(lái)自定義顏色）。
在你的出現(xiàn)右側(cè)空白問(wèn)題的頁(yè)面上，你會(huì)看到有一個(gè)元素?fù)纹屏隧?yè)面，一直頂?shù)阶钣疫叺倪吔?，修正這個(gè)元素就可以徹底的解決問(wèn)題。
這樣，一旦頁(yè)面出現(xiàn)了奇怪的問(wèn)題時(shí)，你就可以通過(guò)點(diǎn)擊這個(gè)書(shū)簽來(lái)檢查問(wèn)題。
方法來(lái)自：Debug Ghost CSS Elements Causing Unwanted Scrolling
原文鏈接：頁(yè)面右側(cè)出現(xiàn)空白？試試這個(gè)CSS調(diào)試器！
在線咨詢
