边框或圆角被背景颜色挡住的解决方案

6.5日更新

之前傻了,哪有那么复杂,直接加个overflow:hidden;就行了,auto还会导致滚动条,多low哦

问题描述

记录一个工作中遇到的问题,给外层div设置了边框,但是里面内容如果宽度100%,然后有背景,就被挡住了。如下图:
边框被挡住

使用过的方法

1.于是我设置margin-left: 0.5px;,左侧是不被挡住了,但是有些地方下面被挡住,而且圆角也被挡住,行不通。
2.我又使用伪元素:after,宽高100%定位画一个边框,结果发现里面的内容被这个挡住了,点不了东西
3.最终,加上overflow: auto, 完美解决。

overflow属性规定当内容溢出元素框时发生的事情

后记

以前从来没注意这个,在这个问题里,却立了大功。

原文地址:https://www.cnblogs.com/wangxi01/p/12981559.html