全局使用 box-sizing: border-box;会出现bug吗。

问题是:没有定位和浮动的情况下,子元素和父元素之间出现空白区域。






1.html结构 和效果截图:
图片说明





父元素的样式:
图片说明


第一行的样式代码:

图片说明





第二行样式代码:

图片说明




其中p是没有写样式的,只有继承通配符的样式margin:0;padding:0;box-sizing: border-box;

问题:见截图

图片说明

会莫名其妙的出现一个空白区域(宽度为:8px,我通过定位调试得知。)

我的解决方法

我把 box-sizing: border-box;去掉后发现能正显示了,但是我之前的布局都会出错了。这并不是我想要的结果。究竟问题出在哪里?求告知。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

2个回答

全局会影响所有的,不是全局应用样式,建议新加子样式,在子样式中加,既可以继承父样式(即这里的全局),也可以有个性设置。

weixin_46323828
weixin_46323828 回复斗弟: 老铁,你的是怎么解决的。我也遇到了这种情况,在局部样式中添加concent—box也不管用,只有去掉全局border才可以,不过我多的空白部分好像和你不太一样
3 个月之前 回复
L_Lintellect
斗弟 全局是影响所有,但是用了这么久的怪异盒模型,以及盒子模型都没见过会出现这种问题的,所以就特别纳闷为什么会出现这个bug,并且我在这里局部(父,子元素都改为标准盒模型,那个空白格依旧在,只有全局为标准盒才不会出现空白格)
12 个月之前 回复

老铁,你的是怎么解决的。我也遇到了这种情况,在局部样式中添加concent—box也不管用,只有去掉全局border才可以,不过我多的空白部分好像和你不太一样

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问