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如果使用bootstrap设置样式，则<button>似乎无效（至少在chrome中）。

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

这里是codepen。

修改：我发现：border: 1px solid transparent; border-radius: 0.25rem;正在取消-webkit-appearance: button;视觉样式。

原始-webkit-appearance: button;，引导程序应用的-webkit-appearance: button;和border: 1px solid transparent;之间似乎存在冲突。

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

Answer 1

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

将属性设置为已有的值将永远不会产生任何影响。

为什么<button>不适用-webkit-appearance：带引导程序的按钮

1 个答案: