来源:
给子盒子设置相同宽度高度大小,并设置子盒子背景颜色,父盒子设置边框。在谷歌和IE浏览器上显示父盒子和子盒子之间有缝隙。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.parent {
border: 10px solid #000;
width: 304px;
height: 304px;
}
.child {
float: left;
width: 100%;
height: 100%;
background-color: red;
}
</style>
</head>
<body>
<div class="parent">
<span class="child"></span>
</div>
</body>
</html>
网上说给父盒子加上box-sizing: border-box;
当父盒子边框1像素时,可以正常展示
还有就是当某
但是当父盒子边框2像素或3像素或其他一些像素时,还是会有缝隙出现
边框的大小、盒子的宽高某些值组合在一起就不会出现缝隙。找不出原因。
目前解决方法就是在子盒子设置边框