每个< div>之间的像素宽度差距与flexbox由于像素舍入错误 [英] Pixel wide gaps between each <div> with flexbox due to pixel rounding error

问题描述

我如何去除似乎是由像素的舍入分数中的误差引起的黑线？这似乎只是一个问题，Firefox似乎正在做更聪明的四舍五入，并呈现完美。

这个问题有一个简单的解决方案吗？

这就是Chrome如何呈现它：

.container {height：100px;宽度：100％;背景色：黑色;显示：flex; flex-flow：nowrap列; } .row {background-color：lightgreen; flex：1 1 auto; }

< div class =container> < div class =row>< / div> < div class =row>< / div> < div class =row>< / div> < div class =row>< / div> < div class =row>< / div> < div class =row>< / div> < div class =row>< / div>< / div>

你可能会试图用box-shadow来填补空白（？）



解决方案

snippetdata-lang =jsdata-hide =false>

.container {height：100px;宽度：100％;背景色：黑色;显示：flex; flex-flow：nowrap列; } .row {background-color：lightgreen; flex：1 1 auto; box-shadow：0 1px lightgreen; }

< div class =container> < div class =row>< / div> < div class =row>< / div> < div class =row>< / div> < div class =row>< / div> < div class =row>< / div> < div class =row>< / div> < div class =row>< / div>< / div>

How do I remove the black lines that seem to be caused by errors in rounding fractions of a pixel? This appears to be an issue with Chrome only, Firefox seems to be doing more intelligent rounding and renders it perfectly.

Is there an easy solution for this problem?

This is how Chrome renders it:

  .container {
    height: 100px;
    width: 100%;
    background-color: black;
    display: flex;
    flex-flow: nowrap column;
  }
  .row {
    background-color: lightgreen;
    flex: 1 1 auto;
  }

<div class="container">
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
</div>

解决方案

you may try to fil the gap(?) with box-shadow

.container {
    height: 100px;
    width: 100%;
    background-color: black;
    display: flex;
    flex-flow: nowrap column;
  }
  .row {
    background-color: lightgreen;
    flex: 1 1 auto;
    box-shadow:0 1px lightgreen;
  }

<div class="container">
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
</div>

这篇关于每个< div>之间的像素宽度差距与flexbox由于像素舍入错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！