css 定位溢出隐藏边框和内容之前出现缝隙？

样式问题：
相同的样式，有的会出现，有的不会出现

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
     span:{
      display: inline-block;
    }
    .btns{
      display: flex;
      flex-wrap: wrap;
      gap:20px
    }
    .vip-price{
      display: inline-block;
      margin-left:26px;
      position: relative;
    }
    .vip-price::before{
      content: '';
      width: 1px;
      height: 23px;
      background: #BCBCBC;
      position: absolute;
      left:-13px;
      top:5px;
      z-index: 8;
    }
    .vip-price__inner{
      display:inline-flex ;
      align-items: center;
      height: 32px;
      padding-right:2px;
      background: #F3EDE3;
      border: 0.9px solid #DEA44D;
      border-radius: 16px;
      overflow: hidden;
    }
    .vip-logo{
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .vip-logo::before{
      content: 'VIP';
      position: relative;
      display: flex;
      align-items: center;
      z-index: 8;
      color: #FFFFFF;
      font-size:18px;
      margin-left:10px
    }
    .vip-logo::after{
      background: linear-gradient(36deg, #E0A74E 0%, #C37412 100%);
      border-radius: 18px 0px 0px 18px;
      height: 100%;
      width: 50px;
      height: 60px;
      transform: rotate(30deg);
      content: '';
      display: block;
      position: relative;
      top:-8px;
      left: -45px;
      z-index: 7;
    }
    button{
      border-radius: 22px;
      color: #E6B365;
      background: linear-gradient(0deg, #000000 0%, #848484 100%);
    }
  </style>
</head>
<body>
<div class="btns">
  <div class="price-row">
    <div class="vip-price__inner">
      <span class="vip-logo" ></span>
      <span class="amount font-weight">￥8.99</span>
      <button>
        申请VIP
      </button>
    </div>
  </div>

  <div class="price-row">
    <div class="vip-price__inner">
      <span class="vip-logo" ></span>
      <span class="amount font-weight">￥8.99</span>
      <button>
        申请VIP
      </button>
    </div>
  </div>

  <div class="price-row">
    <div class="vip-price__inner">
      <span class="vip-logo" ></span>
      <span class="amount font-weight">￥8.99</span>
      <button>
        申请VIP
      </button>
    </div>
  </div>

  <div class="price-row">
    <div class="vip-price__inner">
      <span class="vip-logo" ></span>
      <span class="amount font-weight">￥8.99</span>
      <button>
        申请VIP
      </button>
    </div>
  </div>

  <div class="price-row">
    <div class="vip-price__inner">
      <span class="vip-logo" ></span>
      <span class="amount font-weight">￥8.99</span>
      <button>
        申请VIP
      </button>
    </div>
  </div>

  <div class="price-row">
    <div class="vip-price__inner">
      <span class="vip-logo" ></span>
      <span class="amount font-weight">￥8.99</span>
      <button>
        申请VIP
      </button>
    </div>
  </div>

  <div class="price-row">
    <div class="vip-price__inner">
      <span class="vip-logo" ></span>
      <span class="amount font-weight">￥8.99</span>
      <button>
        申请VIP
      </button>
    </div>
  </div>

  <div class="price-row">
    <div class="vip-price__inner">
      <span class="vip-logo" ></span>
      <span class="amount font-weight">￥8.99</span>
      <button>
        申请VIP
      </button>
    </div>
  </div>
</div>

</body>
</html>

希望得到的回答：
1、产生这个缝隙的原因
2、怎么处理

引搜索了相关问题的回答，有的说是换行导致空白字符，所以出现这个白色的缝隙，我这个案列好像不属于这种情况

补充下问题：
目前电脑分别率1920*1080 缩放125% 的时候会出现，缩放100%的时候没有
部分分辨率不会出现

css position overflow

阅读 5.3k

6 个回答

得票最新

Mannix

2.2k2311

发布于
2022-09-02 广东

✓ 已被采纳

当尺寸非整数或非整倍缩放时，可能会出现该问题。不限于溢出隐藏，即使是普通的两个 div 嵌套，内部 div 和外部 div 边框紧贴的情况下也会出现该问题

问题重现

<style>
  .outer {
    border: 9.9px solid #000;
    width: 100px;
    height: 100px;
  }
  .inner {
    background: #000;
    width: 100px;
    height: 100px;
  }
</style>
<div class="outer">
  <div class="inner"></div>
</div>

100% 缩放下的效果： div边框和内容之间出现缝隙.png
修改 border 为 10px solid #000，125% 缩放下的效果：

原因参考
Issue 1120347
css 页面缩放边框产生空隙相关

解决方法
首先考虑避免这种布局。比如不要在里面的元素加背景，直接在有边框的元素上加背景就行（CSS 可以有多个背景）。或者给有边框的元素套个 div 做溢出隐藏，避免直接在有边框的元素上做溢出隐藏

其他几种消除空隙的方法：

border 加到伪元素上

目标元素 {
  position: relative;
  padding: 1px 3px 1px 1px;
}
目标元素::伪元素 {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #DEA44D;
  border-radius: 9em;
  pointer-events: none;
}

轮廓 outline

目标元素 {
  margin: 1px;
  outline: 1px solid #DEA44D;
}

或

目标元素 {
  padding: 1px 3px 1px 1px;
  outline: 1px solid #DEA44D;
  outline-offset: -1px;
}

阴影 box-shadow

目标元素 {
  margin: 1px;
  box-shadow: 0 0 0 1px #DEA44D;
}

或

目标元素 {
  padding: 1px 3px 1px 1px;
  box-shadow: 0 0 0 1px #DEA44D inset;
}

250% 缩放下的效果：

题外话
建议圆角大点，含边框的高度是 34px，16px 的圆角不够，可以尽量设大，比如 border-radius: 9em;

himushroom

1.5k1317

发布于
2022-09-02 贵州

更新于
2022-09-02

这个问题我也遇到过，不要把渐变色放在盒子里面的子元素/伪元素上去做覆盖，这样覆盖出来就是会有问题，特别是有border的时候特别明显，我给你改了一下，在你原来的代码基础上，把after里面的渐变色提出来放在inner层就行了，你看看 -> https://codesandbox.io/s/fen-...

补充：我也觉得你这个结构有点问题，应该会有更简单的写法，你可以再好好优化一下，我只针对你提出的问题做了修改

半橙汁

22322849

发布于
2022-09-02 北京

更新于
2022-09-02

1.box-sizing 属性引起的；
2.解决方案，在.vip-price__inner内添加一句：

    box-sizing: border-box;

补充：

比如 1px 是一个像素（不一定）。在放大或者缩小时，比如放大 125% 。 1.25个像素？
可最小的计量单位就是一个像素！因此就可能出现误差。【如有描述口误的地方，欢迎指出】
实在不行就让UI同学切图吧~【今天都周五了👻】

YoLinDeng

5451318

发布于
2022-09-02 广东

更新于
2022-09-02

把vip-price__inner中的border 样式修改为border: 1px solid #DEA44D; 应该border 小于1时的问题，可以看看如何处理小于1px的样式。

补充：
给price-row这个类加下overflow:hidden; border-radius: 16px;然后vip-price__inner去掉overflow:hidden; 增加box-sizing:border-box;

陟上晴明

20.9k124691

发布于
2022-09-02 浙江

更新于
2022-09-02

我在codepen上面复现了一下你的demo，但是并没有你描述的间隙的问题。
你可以点击展开看看是有什么出入。

样式复刻图片

CodePen Demo

更新：

既然是缩放 125% 之后的问题，多半是缩放时计算像素造成的问题，计算出来的逻辑像素没办法占满一格物理像素造成的。而页面渲染过一次之后上下滑动并不会重新触发重绘。所以会保持某一行会有这个问题。

可以尝试把 .vip-price__inner 类的盒模型修改成 border-box 即可解决。
或者修改容器高度或者其他一个可以间隔的属性，让元素错开半格像素的位置就行。比如说修改margin, gap都可以修复这个问题。

林小志

4.4k2218

发布于
2022-09-02 浙江

border: 0.9px solid #DEA44D;

不知道这个 0.9px 是出于什么目的写的，但有一点很明确的是，显示器的分辨率最小单位应该是 1 个像素点，如果是有小数的话，极有可能会出现解析问题。结合 @陟上晴明的 codepen demo，将 0.9px 换成 1px 就可以了。

附带说一下，这个按钮的样式写的有点复杂了，flex、inline-flex混合使用，并且 span 后面还多了一个 : （span: {}）。

.btns {
  display: flex;
  flex-wrap: wrap;
  gap:20px;
}
.vip-price__inner {
  display: flex;
  align-items: center;
  height: 32px;
  padding-right: 2px;
  overflow: hidden;
  background-color: #F3EDE3;
  border: 1px solid #DEA44D;
  border-radius: 16px;
}
.vip-logo {
  display: flex;
}
.vip-logo::before{
  content: 'VIP';
  position: relative;
  align-self:center;
  margin-left:10px;
  font-size:18px;
  color: #FFF;
  z-index: 8;
}
.vip-logo::after {
  content: '';
  width: 50px;
  height: 60px;
  transform: rotate(30deg) translate(-40px, 15px);
  background: linear-gradient(36deg, #E0A74E, #C37412);
}
button {
  margin-left: 5px;
  color: #E6B365;
  background: linear-gradient(#848484, #000);
  border-radius: 22px;
}

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

被 3 篇内容引用

推荐问题

css 定位溢出隐藏边框和内容之前出现缝隙？

更新：

你尚未登录，登录后可以

为什么这个动画一直在抖动?

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

通栏banner图片，如何不变形且内容完全显示不裁剪啊？

如何实现前端视频流的处理和优化？

我看到很多网站，都会对CSS初始化：`margin: 0; padding: 0;` ，目的是什么呢？

这个内嵌的CSS样式，实际审查元素这个CSS样式是空的，这是怎么实现的？

有哪个开源的js时间插件支持，年，季度，月，周，日范围选择？

css 定位 溢出隐藏 边框和内容之前出现 缝隙？

更新：

你尚未登录，登录后可以

为什么这个动画一直在抖动?

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

通栏banner图片，如何不变形且内容完全显示不裁剪啊？

如何实现 前端视频流的处理 和优化？

我看到很多网站，都会对CSS初始化：`margin: 0; padding: 0;` ，目的是什么呢？

这个内嵌的CSS样式，实际审查元素这个CSS样式是空的，这是怎么实现的？

有哪个开源的js时间插件支持，年，季度，月，周，日范围选择？

css 定位溢出隐藏边框和内容之前出现缝隙？

如何实现前端视频流的处理和优化？