1

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

http://codepen.io/HendrikEng/pen/PzZkjX

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;
        }
    }
4

1 回答 1

1

我不确定这个演示的样子，所以很难知道问题出在哪里。以下是一些可能会有所帮助的注意事项：

  1. Chrome 在背景渐变上总是存在亚像素舍入问题。这意味着网格叠加有亚像素舍入误差，即使实际布局没有。该问题已在文档中注明。不应将网格叠加层视为在所有视口尺寸下都是像素完美的。

  2. 隔离并不能完全解决亚像素舍入问题，但它应该可以解决大多数由此产生的问题。隔离意味着您永远不会偏离一个像素以上，并且项目不会相互推到下一行。您可能仍然有单像素间距问题。

于 2016-08-04T17:15:32.850 回答