前言:
今天仿造慕课网写网页时,就要大功告成了,除了一个问题,就是浏览器右边出现了一小段空白,且横向出现了滚动条,这肯定是哪个元素超过了浏览器的默认宽度,具体bug如下图:
bug出现的原因
内部元素宽度撑开了页面。比如说宽度设置100%,然后你又来了个margin,那就gg.
解决办法有两种
1.溢出的设置隐藏
在css代码中:
html{
width:100%;
overflow-x:hidden;
}
2.找出溢出元素(~是不是想揍我~2333~
- F12(window)打开调试,挨个删除元素,看看删除那一个元素的时候,横向滚动条会消失,什么?那么多元素删到什么时候?滚犊子~还不是你自己挖的坑(:~手动滑稽
你可以先看外围body下的元素呀,先外围,确定好那个之后,再深入去找,不是省时间吗!当然了,下面有一个更直观的方法,我不小心在知乎看到的!可怕~知乎真是大神众多~~~ - 打开你的html,打开Console(控制台)贴上如下代码:
[].forEach.call($$("*"),function(a){
a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})
回车,你会看到不一样的html~可怕~
看下我的bug,展现的是直观:
最右边那个绿色框飞出去了一小部分,还有下面,嘻嘻~
好了,看完去修复你的bug吧。