超對稱電網像素舍入誤差

Question

嘿我試圖修復超對稱子像素舍入誤差與使用分離的方法，但不知何故，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; 
     } 
    } 

Answer 1

我不知道是什麼的演示是爲了什麼樣子，所以很難知道問題是什麼。以下是一些可能有所幫助的注意事項：

1. Chrome對背景漸變總是有子像素舍入問題。這意味着即使實際佈局沒有，網格疊加也會出現子像素舍入誤差。該問題在文檔中有記錄。在所有視口尺寸下，網格疊加不應該被視爲像素完美。

2. 隔離不能解決子像素完全四捨五入，但它應該解決大部分的問題產生。隔離意味着你永遠不會超過一個像素，物品不會互相推到下一行。您可能仍然存在單像素間距問題。