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.4k

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;

陟上晴明

21.1k124691

发布于
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，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

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

怎么把一个矩形div变成一个直角三角形？

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

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

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

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

更新：

你尚未登录，登录后可以

如何自定义设置虚线边框的样式？

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

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

怎么把一个矩形div变成一个直角三角形？

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

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

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

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

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