flexbox 项目中的白线不会消失

Posted 2023-03-06

【中文标题】flexbox 项目中的白线不会消失

【英文标题】：White line in flexbox item that wont go away

【发布时间】：2017-08-29 12:54:24

【问题描述】：

所以我的问题是我无法弄清楚如何摆脱图像中的这条白线。请有人至少告诉我为什么会这样。我试图摆脱它，但我没有成功。我试过检查元素，那里没有边框。它非常令人沮丧。 这是这个元素的 html（它是一个弹性项目）。

 <div class="section-packages-flex">

  <div class="section-packages-item">
    <div class="section-packages-image">
      <h3 class="package-heading"><span class="package-underline">Package 1</span> <br /><span class="orange">The Zebra</span></h3>
      <img class="img-responsive"  src="_images/package-2.png">
    </div>
    <div class="section-packages-content">
      <div class="section-package-content-full">

      </div>
      <div class="section-package-content-split">

      </div>
      <div class="section-package-content-split">

      </div>
    </div>

    <div class="section-packages-pricing orange-background">
      <h3>R 2500.00</h3>
    </div>
  </div>

这是CSS。 背景

.orange-background 
    background: rgba(245,123,32,1.00);
    background-color: rgba(245,123,32,1.00);

父容器：

.section-packages-flex 
    display: flex;
    display: -webkit-flex;
    flex-flow: column wrap;
    -webkit-flex-flow: column wrap;
    justify-content: space-between;
    -webkit-justify-content: space-between; 


.section-packages-item 
    display: flex;
    display: -webkit-flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    justify-content: space-between;
    -webkit-justify-content: space-between;


.section-packages-pricing 
    width: 20%;
    color: rgba(255,255,255,1.00);
    display: flex;
    display: -webkit-flex;
    flex-flow: column wrap;
    -webkit-flex-flow: column wrap;
    justify-content: center;
    -webkit-justify-content: center;
    text-align: center;
    border-left: 1px solid rgba(88,88,88,0.00);
    border-top: 1px solid rgba(88,88,88,1.00);  

【问题讨论】：

要得到你的答案，最好创建一个code sn-p或一个fiddle，这样我们就可以像你一样检查。

我在您的代码中看不到任何白线，是浏览器特有的问题吗？如果可能，添加工作 sn-p。

我认为是橙色 div 右侧 1px 宽的白色竖线。

请提供小提琴或密码笔

好的，所以我做了一支笔，但它没有显示白线。 (codepen.io/anon/pen/GWewRz) 它似乎只发生在 chrome 而不是 firefox 上

【参考方案1】：

这实际上是基于 Chromium 的浏览器中的一个错误。我在 Firefox 上试过，效果很好。希望他们尽快解决。

这就是我讨厌 CSS 的原因。他们应该实现一个标准的用户代理：/

【参考方案2】：

我只是添加了一个负边距值来摆脱它。

【讨论】：

坏主意。使用负边距来“隐藏”问题只会在未来引起问题。最好首先找出导致问题的真正原因！