使用box-sizing:border-box后,在父元素和子元素边框产生的1px空白问题

今天鸿硕在开发hongshop商城的时候,在开发前端商品个数选择的时候,出现了一个问题,目前还没有解决,记录如下:

也就是顶端或者底部,父元素的框和子元素的框之间有个大概1像素的空隙,这个空隙如果缩放浏览器的显示大小的话,有时候空隙没有了。

自己写的参考代码如下:

<div class="hs-box row">
    <!-- <input type="text" id="num_input" class="num-show fl" value="1">-->
    <div class="num-show fl bd4">1</div>
    <span class="hs-box1 bd2">+</span>
    <span class="hs-box1 bd1">-</span>
</div>
<style>
.hs-box {
    width: 7.7rem;
    height: 5.2rem;
    border: solid 1px red;
    margin: 5rem auto;
    margin-left: 5rem;
    clear: both;
    box-sizing: border-box;  /** 值为border-box,需宽高各增加2px,因为border包含在width或height内。 */
}
.num-show {
    display: block;
    width: 5rem;
    height: 5rem;
    float: left;
    /* border: 0px; */
    box-sizing: border-box;
    border-top: 0px;
}
.hs-box1 {
    width: 2.5rem;
    height: 2.5rem;
    float: left;
    box-sizing: border-box;
    border-top: none
}
.hs-box2 {
    width: 2.5rem;
    height: 2.5rem;
    float: left;
    box-sizing: border-box;
}
</style>

 

鸿硕暂时还没有找到好的办法,如果您有好的建议请留言或联系鸿硕,谢谢!

给TA打赏
共{{data.count}}人
人已打赏
css3

CSS3 animation属性

2021-8-20 16:24:55

案例展示

信阳市元强保温建材有限公司

2020-7-28 19:25:06

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索