小编cei*_*att的帖子

由于像素舍入误差,每个<div>与flexbox之间的像素间隙较大

如何删除看似由像素的舍入分数中的错误引起的黑线?这似乎只是Chrome的问题,Firefox似乎正在进行更智能的舍入并完美呈现.

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

这就是Chrome呈现的方式:

Chrome bug

  .container {
    height: 100px;
    width: 100%;
    background-color: black;
    display: flex;
    flex-flow: nowrap column;
  }
  .row {
    background-color: lightgreen;
    flex: 1 1 auto;
  }
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

css google-chrome flexbox

3
推荐指数
2
解决办法
1790
查看次数

标签 统计

css ×1

flexbox ×1

google-chrome ×1