时间戳

首页 > 解决方案 > Box-shadow inset & border:none 导致表单域在 IE/Edge 中闪烁

html - Box-shadow inset & border:none 导致表单域在 IE/Edge 中闪烁

问题描述

我在 IE/Edge 上遇到问题。几天前我试图解决它，但我没有想法。当我上下滚动我的网站时，表单域闪烁着白色、灰色和蓝色。我发现了问题，它是box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.15) and border:0;. 如果我删除了这些输入字段中的inset属性box-shadow，border:0那么表单字段将恢复正常行为。但是，我想将它们保留在网站中。不确定是否有任何方法可以解决此问题。

我在这里附上了截图 表单域闪烁示例 1

表单域闪烁示例 2

代码：

input[type="text"],
input[type="email"],
input[type="number"] {
    height: 4.2rem;
    width: 100%;
    max-width: 40rem;
    background: $color_light_grey_1;
    font-size: 1.4rem;
    border: 0;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    padding: spacing(xxs) spacing(xs);
    transition: box-shadow 0.2s, border-width 0.2s;
    border-left: 0 solid var(--color-primary);

    &:focus {
        outline: 0;
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);
        border-left-width: 3px;
    }

    @include breakpoint(xs) {
        font-size: 1.6rem;
        padding: spacing(xxs) spacing(sm);
    }

    &.input--alternate {
        background: $color_white;
        box-shadow: $light_shadow;

        &:focus {
            outline: 0;
            box-shadow: 0 1px 1px $color_medium_grey_1;
        }
    }
}

标签： htmlcsssass

解决方案

在 IE 中，属性border-collapse: collapse;会自动添加。尝试添加'border-collapse：分开；到你的输入类。

推荐阅读