html - 为什么 不适用 -webkit-appearance : button with bootstrap

Question

Bootstrap 4 应用这些样式:

button, html [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
}

.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

所以我希望它们具有相同的风格:

<a class="btn" type="button"> Button </a>

<button class="btn"> Button </button>

但是-webkit-appearance: button似乎对 <button> 什么都不做如果使用 bootstrap 设置样式(至少在 chrome 中)。

有人可以解释这种行为吗？

这是一个 codepen .

编辑:我发现这个:border: 1px solid transparent; border-radius: 0.25rem;正在取消 -webkit-appearance: button;视觉风格。

native -webkit-appearance: button; 之间似乎存在冲突, -webkit-appearance: button;由 bootstrap 和 border: 1px solid transparent; 应用.

现在的问题是为什么它只取消<button />的视觉风格即使给-webkit-appearance: button;更高的优先级(通过执行 <button type="button"> )？正如我在开发工具中看到的那样，bootstrap 的 -webkit-appearance: button;优先于 native 并替换它，因此它的行为应该与 type="button" 相同在任何其他 html 标记上。

Answer 1

-webkit-appearance: button 是 Chrome 中该属性的默认值。

将属性设置为它已有的值永远不会有任何效果。