前端css实战bug解决方法

【前端css实战bug解决方法】今天解决了一个烦人的bug,也算一点实战经验,总结一下,以免下次再犯。
html5众多标签我学的并不是很全,css高级一点的属性也是很少运用。尽管如此,每次写代码却似乎毫不影响,我是说似乎,其实还是会动不动遇到一些奇怪的问题。
其实人都是趋利避害的,遇到问题第一反应要不是拖着要不就是逃避,出现这种行为是完全可以理解的。
但是总有一天拖得不能再拖,躲的了初一躲不过十五,之前做的网页,有个bug,一直没有解决,原本觉着不是什么要紧的事。反正好多网页都有这个毛病。
先来一图,看看究竟是怎么回事。
(管理学院网站)
前端css实战bug解决方法
文章图片
所以不光我写的页面有这个毛病,学校相关的大多数网页都是有这个问题。
前端css实战bug解决方法
文章图片
前端css实战bug解决方法
文章图片


前端css实战bug解决方法
文章图片
问题虽然烦人,但是并不是不能解决。在网上搜一搜肯定有相关的问题和解决的方案的。因为大多数情况下,你遇到的问题别人也遇到过,以前的人遇到过,以后的人还是会遇到,所以这也是人类知识存在的意义所在。
问题大家也都看到了,就是在电脑浏览器里面显示正常,在手机别的什么现实屏幕不一样的设备里的浏览器里面会出现一部分的空白,但是按照代码的原理,100%填充宽度之后不应该出现这种问题的。
其实很好解决的在css里找到相关div,然后在width:100%;后面加上一串代码“ min-width:*****px; ”问题就顺利解决的。
也有网友解释了出现这种问题的原因,看的云里雾里。大概意思是, 浏览器默认100%宽度为浏览器窗口的宽度。所以当浏览器的分辨率不一样的时候就会出现这个烦人的bug。


好了。问题总会解决,比想象的要简单。少废话多做事,加油。


公众号:萝卜炖肉感谢关注

    推荐阅读