html - 可以在 Chrome 中精美再现的 CSS 在 Firefox 中很脏

Question

在应用以下 CSS Chrome 和 Chromium 衍生浏览器（包括 OPERA）时，可以很好地反映菱形图案，但如果将其应用到 Firefox 及其衍生浏览器，它会显得很脏。

如果您想在 Firefox 中重现漂亮的菱形图案等，您该如何解决？

实际插入 CSS 的页面 https://www.yahoo.co.jp/

/* Base element */
body{
background-color: #ff3838e3;
color: #0d0d0d;
filter: sepia(30%);
zoom: 95.5%;}
*:not(.barGraph){
font-family: "Meiryo", sans-serif !important;
font-size: 16px;
border-width: 0.1px !important;
border-radius: 10px;
}


/* Code for problems with Firefox and Firefox-derived browsers ↓ */

div#wrapper._1DyDVN-3FsqGF_QKLg1M9G{
background-color: #ff151500;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #ffe5e545), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #ffe5e545), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #ffe5e545)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #ffe5e545));
-webkit-background-size:200px 200px;
}

我尽量把它保持在最低限度，进一步刮掉上面的“最低要求”代码是：

/* Code for problems with Firefox and Firefox-derived browsers ↓ */

body{
background-color: #ff3838e3;
}

div#wrapper._1DyDVN-3FsqGF_QKLg1M9G{
background-color: #ff151500;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #ffe5e545), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #ffe5e545), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #ffe5e545)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #ffe5e545));
-webkit-background-size:200px 200px;
}

标签： htmlcssfirefoxcolorsbackground-color