html 像素偏差,html – 如何防止高像素比设备(Retina)上的半像素SVG偏移？

iOS：您只需要将任何CSS转换添加到SVG元素以在Safari中修复它.例如.block_edge {-webkit-transform：scale(1);变换：scale(1)}.

Android：首先,您需要为SVG元素添加一个微小的CSS缩放变换.当你这样做时,< svg>和< rect>元素将被呈现在它们必须的位置,但是< rect>背景将在顶部和底部重复：

要修复它,您需要将图案扩展到顶部和底部以防止背景重复.然后你需要添加一个填充的< rect>在SVG顶部正上方,删除顶部的最后一个空白行.在Android浏览器的顶部仍然会留下难以看见的深灰色线条.

.common-bg {

background: #222;

fill: #222;

}

.block {

max-width: 300px;

margin: 20px auto;

}

.block_content {

height: 50.5px;

}

.block_edge {

display: block;

/* Fix. No more than 5 zeros. */

-webkit-transform: scale(1.000001);

transform: scale(1.000001);

}

class="block_edge"

width="100%"

height="10"

xmlns="http://www.w3.org/2000/svg"

version="1.1"

xmlns:xlink="http://www.w3.org/1999/xlink"

>

The snippet on CodePen

我在Android上的移动和桌面Safari 10,Android 4.4和Chrome 58上进行了测试.

结论：修复过于复杂且不可靠所以我建议制作这样的布局,其中半像素移位不会导致空白行.

.common-bg {

background: #222;

fill: #222;

}

.block {

max-width: 300px;

margin: 20px auto;

}

.block_content {

height: 50.5px;

}

.block_edge {

display: block;

/* Overflow for unexpected translateY */

margin-top: -1px;

}

class="block_edge"

width="100%"

height="12"

xmlns="http://www.w3.org/2000/svg"

version="1.1"

xmlns:xlink="http://www.w3.org/1999/xlink"

>

The snippet on CodePen