CSS Div雪佛龙与Firefox不一致

Question

我有一个CSS V形人字形代码。它在chrome中效果很好，但在Firefox中，它在div中有these个分隔符，而在chrome中这些分隔符实际上并不存在。

.sidenavChevron {
    border-style: solid;
    border-width: 6px 6px 0 0;
    content: '';
    height: 12px;
    width: 12px;
    top: 15px;
    right: 20px;
    display: inline-block;
    transform: rotate(45deg);
    transition: var(--delay);
    position: relative;
    color: #f1f1f1;
    float: right;
}

我该怎么办？

Answer 1

您可以改用框阴影：

.sidenavChevron {
    border-style: solid;
    border-width: 6px 6px 0 0;
    height: 12px;
    width: 12px;
    top: 15px;
    right: 20px;
    display: inline-block;
    transform: rotate(45deg);
    transition: var(--delay);
    position: relative;
    left: 30px;
}

.sidenavChevron2 {
    box-shadow: 6px -6px 0 currentColor;
    height: 18px;
    width: 18px;
    top: 15px;
    right: 20px;
    display: inline-block;
    transform: rotate(45deg);
    transition: var(--delay);
    position: relative;
    left: 40px;
}

<span class="sidenavChevron"></span>
<span class="sidenavChevron2"></span>

这会给您带来另一种问题：

您可以使用剪辑或等效项隐藏它：

.sidenavChevron {
    display: inline-block;
    height: 25.46px;  /* √2 * 18 */
    overflow: hidden;
    position: relative;
    width: 16.97px;  /* √2/2 * (18 + 6) */
}

.sidenavChevron::before {
    box-shadow: 6px -6px 0 currentColor;
    content: '';
    height: 18px;
    left: -9.5px;  /* -18 + √2/2 * (18 - 6) */
    position: absolute;
    right: 20px;
    top: 50%;
    transform: rotate(45deg);
    transform-origin: right top;
    transition: var(--delay);
    width: 18px;
}

<span class="sidenavChevron"></span>

…好的SVG怎么样？