來(lái)源:
給子盒子設(shè)置相同寬度高度大小,并設(shè)置子盒子背景顏色,父盒子設(shè)置邊框。在谷歌和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>

image.png
網(wǎng)上說(shuō)給父盒子加上box-sizing: border-box;
當(dāng)父盒子邊框1像素時(shí),可以正常展示

image.png
還有就是當(dāng)某
但是當(dāng)父盒子邊框2像素或3像素或其他一些像素時(shí),還是會(huì)有縫隙出現(xiàn)

image.png
邊框的大小、盒子的寬高某些值組合在一起就不會(huì)出現(xiàn)縫隙。找不出原因。
目前解決方法就是在子盒子設(shè)置邊框