这是我面临的问题：Chrome Firefox。
我觉得应该有一种方法可以用渐变创建清晰的过渡，而且确实存在。通过将两个双色节点相隔几个像素放置，然后在与第二个双色相同的像素上放置一个独特的颜色节点，可以创建清晰的颜色过渡。
但通常我使用 Firefox，而不是 chrome。在很长一段时间里，我都认为我的方法可能是虚无缥缈的，因为它实际上只能以五个像素的间隔工作。所以它非常不可靠。但最近我发现 Chrome 是正确的。因此，我整理了一个测试片段，我将在下面向您展示准确地展示行为。
有人能告诉我为什么会发生这种行为，我能做些什么吗？
.demo {
background-color: black;
display: inline-block;
font-family: arial;
font-size: 32px;
line-height: 42px;
text-align: center;
}
.demo:after {
content: 'CRISP';
color: white;
}
.one {
background-image: linear-gradient(black 1px, transparent 1px), linear-gradient(90deg, red 42px, #0F0 42px, #0F0 84px, blue 84px);
height: 42px; width: 126px;
}
.two {
background-image: linear-gradient(black 2px, transparent 2px), linear-gradient(90deg, red 42px, #0F0 42px, #0F0 84px, blue 84px);
height: 42px; width: 126px;
}
.three {
background-image: linear-gradient(black 3px, transparent 3px), linear-gradient(90deg, red 42px, #0F0 42px, #0F0 84px, blue 84px);
height: 42px; width: 126px;
}
.four {
background-image: linear-gradient(black 4px, transparent 4px), linear-gradient(90deg, red 42px, #0F0 42px, #0F0 84px, blue 84px);
height: 42px; width: 126px;
}
.five {
background-image: linear-gradient(black 5px, transparent 5px), linear-gradient(90deg, red 42px, #0F0 42px, #0F0 84px, blue 84px);
height: 42px; width: 126px;
}
.six {
background-image: linear-gradient(black 6px, transparent 6px), linear-gradient(90deg, red 42px, #0F0 42px, #0F0 84px, blue 84px);
height: 42px; width: 126px;
}What you see (unless you're experiencing the same problem I am):<br />
<div style="width: 776px;">
<div class="demo one"></div>
<div class="demo two"></div>
<div class="demo three"></div>
<div class="demo four"></div>
<div class="demo five"></div>
<div class="demo six"></div>
</div><br />
What I see:<br />
<img src="http://i.imgur.com/dvxszeJ.png" /><br /><br />
Don't let the even odd pattern fool you though... A different test run produced these results:<br />
<img src="http://i.imgur.com/f4nWWtF.png" />下面是对行为不端的盒子的更好的了解：
我被要求为有问题的黑色到透明渐变提供确切的代码行
div.fluxclass { /*which gradients are effected depend on seemingly random circumstances*/
background-image:
linear-gradient(to bottom, #000 5px, transparent 5px);
}