Question

嘿，我尝试使用隔离方法修复susy子像素舍入错误，但不知何故它仍然存在于chrome ....无法弄清楚我实际上做错了什么，非常感谢你的帮助，非常感谢

HTML：

<div class="l-wrap-page">
  <div class="l-wrap-main">

<div class="c-block">
    <div class="c-block__item">
       <img src="http://lorempixel.com/400/200/">
    </div>
  <div class="c-block__item">
    <div class="c-block-article">
      <p>text text text texte text text
        </p>
    </div>
  </div>
 </div>
  <div class="c-block">
    <div class="c-block__item">
      <img src="http://lorempixel.com/400/200/">
    </div>
  <div class="c-block__item">
    <div class="c-block-article">
      <p>text text text texte text text
        </p>
    </div>
  </div>
 </div>

     </div> </div>

SCSS：

@import "breakpoint";
@import "susy";

@mixin cf {
  &:after {
    clear: both;
    content: '';
    display: table;
    }
}

$susy:(
columns: 12,
container: 100%,
output: float,
gutters: 0,
global-box-sizing: border-box,
debug: (
image: show,
output: overlay,
color: rgba(77, 171, 252, .2),
toggle: top left,
),
);

@include border-box-sizing; 

.l-wrap-page {
    @include container;
    @include show-grid();
}
.l-wrap-main {
    @include span(12 of 12);
}

.c-block {
        @include cf;
        @include span(12);
        @include show-grid();
        &:nth-child(even) {
            background-color: lightblue;
            .c-block__item {
                @include nested(12) {
                    &:nth-child(1) {
                        @include span(isolate 3 at 9 last);
                    }
                    &:nth-child(2) {
                        @include span(isolate 3 at 3 first);
                    }
                }
            }
        }
        &:nth-child(odd) {
            background-color: pink;
            .c-block__item {
                @include nested(12) {
                    &:nth-child(1) {
                        @include span(isolate 3 at 3 first);
                    }
                    &:nth-child(2) {
                        @include span(isolate 3 at 9 last);
                    }
                }
            }
        }
        &:last-child {
            @include last;
        }
    }

Answer 1

我不确定该演示的外观是什么，因此很难知道问题是什么。以下是一些可能有用的注意事项：

Chrome在背景渐变上始终存在子像素舍入问题。这意味着网格叠加具有子像素舍入误差，即使实际布局没有。该问题在文档中说明。在所有视口大小中，网格覆盖不应被视为像素完美。
隔离并不能完全修复子像素舍入，但它应该能解决大部分问题。隔离意味着您永远不会超过一个像素，并且项目不会相互推动到下一行。您可能仍然存在单像素间距问题。

susy网格像素舍入错误

1 个答案: