.wrapper{
width: 800px;
margin: 0 auto;
}
canvas{
margin-left: auto;
margin-right: auto;
}
.color-picker{
width: 100%;
height: auto;
}
.color-col{
width:6.6666%;
min-height: 50px;
display: inline-flex;
display: -webkit-inline-flex;
} <table class="color-picker">
<tr>
<td class="text-center ">
<h1 class="mar50">GIFT BOX COLOUR</h1>
</td>
</tr>
<tr>
<td class="color-col gift-color" onclick="giftColourClick('0')"
style="background-color:#f4ed94">
</td>
<td class="color-col gift-color" onclick="giftColourClick('1')"
style="background-color:#eef5db">
</td>
<td class="color-col gift-color" onclick="giftColourClick('2')"
style="background-color:#c7efcf">
</td>
<td class="color-col gift-color" onclick="giftColourClick('3')"
style="background-color:#a9d18e">
</td>
<td class="color-col gift-color" onclick="giftColourClick('4')"
style="background-color:#78cbcf">
</td>
<td class="color-col gift-color" onclick="giftColourClick('5')"
style="background-color:#5eb3d6">
</td>
<td class="color-col gift-color" onclick="giftColourClick('6')"
style="background-color:#bdd7ee">
</td>
<td class="color-col gift-color" onclick="giftColourClick('7')"
style="background-color:#af90a9">
</td>
<td class="color-col gift-color" onclick="giftColourClick('8')"
style="background-color:#ffc7df">
</td>
<td class="color-col gift-color" onclick="giftColourClick('9')"
style="background-color:#ff5a5f">
</td>
<td class="color-col gift-color" onclick="giftColourClick('10')"
style="background-color:#e88873">
</td>
<td class="color-col gift-color" onclick="giftColourClick('11')"
style="background-color:#c4c4c4">
</td>
<td class="color-col gift-color" onclick="giftColourClick('12')"
style="background-color:#ffffff">
</td>
<td class="color-col gift-color" onclick="giftColourClick('13')"
style="background-color:#6e6460">
</td>
<td class="color-col gift-color" onclick="giftColourClick('14')"
style="background-color:#464647">
</td>
</tr>
<tr>
<td colspan="15">
<input class="mar50" id="gift-range" onchange="giftRangeChange(this.value)" type="range" min="0" max="14" value="14"/>
</td>
</tr>
<tr >
<td class="text-center">
<h1 class="mar50">RIBBON COLOUR</h1>
</td>
</tr>
<tr>
<td class="color-col ribbon-color" onclick="ribbonColourClick('0')"
style="background-color:#f4ed94">
</td>
<td class="color-col ribbon-color" onclick="ribbonColourClick('1')"
style="background-color:#eef5db">
</td>
<td class="color-col ribbon-color" onclick="ribbonColourClick('2')"
style="background-color:#c7efcf">
</td>
<td class="color-col ribbon-color" onclick="ribbonColourClick('3')"
style="background-color:#a9d18e">
</td>
<td class="color-col ribbon-color" onclick="ribbonColourClick('4')"
style="background-color:#78cbcf">
</td>
<td class="color-col ribbon-color" onclick="ribbonColourClick('5')"
style="background-color:#5eb3d6">
</td>
<td class="color-col ribbon-color" onclick="ribbonColourClick('6')"
style="background-color:#bdd7ee">
</td>
<td class="color-col ribbon-color" onclick="ribbonColourClick('7')"
style="background-color:#af90a9">
</td>
<td class="color-col ribbon-color" onclick="ribbonColourClick('8')"
style="background-color:#ffc7df">
</td>
<td class="color-col ribbon-color" onclick="ribbonColourClick('9')"
style="background-color:#ff5a5f">
</td>
<td class="color-col ribbon-color" onclick="ribbonColourClick('10')"
style="background-color:#e88873">
</td>
<td class="color-col ribbon-color" onclick="ribbonColourClick('11')"
style="background-color:#c4c4c4">
</td>
<td class="color-col ribbon-color" onclick="ribbonColourClick('12')"
style="background-color:#ffffff">
</td>
<td class="color-col ribbon-color" onclick="ribbonColourClick('13')"
style="background-color:#6e6460">
</td>
<td class="color-col ribbon-color" onclick="ribbonColourClick('14')"
style="background-color:#464647">
</td>
</tr>
<tr>
<td colspan="15">
<input class="mar50" id="ribbon-range" onchange="ribbonRangeChange(this.value)" type="range" min="0" max="14" value="9"/>
</td>
</tr>
</table>
我使用html画布和颜色选择器制作了animation，您可以在其中更改动画的两种颜色，但经过大量修复后，我发现浏览器之间存在一些差异。如果在镀铬中，Mozilla和Edge的一切都很完美，那么黑色就会落到一个地方。
我有什么建议可以解决这个问题吗？
答案 0 :(得分：0)
尝试显示：阻止和浮动：左侧.color-col。它适用于Mozilla / Mac和Edge to。
答案 1 :(得分：0)
.color-col{
width:6.66666666667%;
min-height: 50px;
float:left; // Edge
display:inline-table; // Chrome
display: -webkit-inline-table; // Safari
display:-moz-box; //Mozilla
}
此更改对我有用并修复了显示问题。