现象:
用浮动布局时, 如果为子元素的宽度指定绝对值,并且子元素具有边框,在缩放浏览器的时候会出现错位现象。
这种现象产生的原因是:
浏览器缩放时,子元素父元素的内容都等比例缩放,而子元素的边框不能等比例缩放,在缩放到达一定程度后,会造成子元素大于父元素,从而产生错位现象。
举例:
<style>
.wrapper {
width: 400px;
background-color: pink;
}
.wrapper::after {
content: '';
display: block;
clear: both;
}
.wrapper > div {
float: left;
height: 200px;
/* box-sizing: border-box;*/
}
.wrapper > div.left {
width: 99px;
border-right: 1px solid #ccc;
background-color: orange;
}
.wrapper > div.right {
width: 300px;
background-color: lightblue;
}
</style>
<div class="wrapper">
<div class="left">left</div>
<div class="right">right</div>
</div>
正常显示效果:
缩小为原本67%后产生错位:
解决方法一:
利用box-sizing属性的border-box.[border-box:指定宽度和高度(最小/最大属性)确定元素边框box。也就是说,对元素指定宽度和高度包括padding和border的指定。内容的宽度和高度减去各自双方该边框和填充的宽度从指定的"宽度"和"高度"属性计算]
css:
<style>
.wrapper {
width: 400px;
background-color: pink;
}
.wrapper::after {
content: '';
display: block;
clear: both;
}
.wrapper > div {
float: left;
height: 200px;
/*解决错位*/
box-sizing: border-box;
}
.wrapper > div.left {
width: 99px;
border-right: 1px solid #ccc;
background-color: orange;
}
.wrapper > div.right {
width: 300px;
background-color: lightblue;
}
</style>
缩放50%后的效果
解决方法二:
将子元素浮动,即两个元素不在一个文档流中,从而避免产生错位
CSS:
<style>
.wrapper {
width: 400px;
background-color: pink;
}
.wrapper > div {
height: 200px;
}
.wrapper > div.left {
width: 99px;
border-right: 1px solid #ccc;
background-color: orange;
float: left;
}
.wrapper > div.right {
margin-left: 100px;
width: 300px;
background-color: lightblue;
}
</style>
缩放30%后的效果: