Firefox和Safari显示不同的按钮样式

Question

我在自己的网站上创建了一个CSS按钮，并通过谷歌浏览器验证了设计。

我使用了以下设计：

.btn-kabumm {
    background-color: #87cbac;
    color: #fff;
    border-color: #87cbac; 
}

.btn-lg {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}

然而，在Safari和FF中，按钮会有一个奇怪的额外边框。

铬：

火狐/ Safari浏览器：

我不太确定如何摆脱它。

Answer 1

这是因为您忘了给按钮提供所有按钮所需的引导根<input id="nf-field-9" value="Absenden" class="ninja-forms-field btn btn-kabumm btn-lg btn-rounded nf-element" type="button"> 类，请参阅有关引导按钮的文档here

EG：

<input id="nf-field-9" value="Absenden" class="ninja-forms-field btn-kabumm btn-lg btn-rounded nf-element" type="button">

应该如何，但你有

Select-String .\sample.txt -pattern '^40[\s][\s][\s][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][\s][0][1]' -context 19,0

将代码与旋转木马中的按钮进行比较，您会看到两者之间的差异

添加适当的类结果：

Linux上的Firefox v58.0b3（64位）截图：）

Answer 2

尝试将所有属性添加到边界元素。 边框样式。边框宽度等例如

 .item{
Border: 1px solid transparent; 
}

可能safari有一些默认的边框样式，所以迫使你自己解决这个问题。

Answer 3

只需将border:none;添加到您的CSS中，它会强制Chrome隐藏其按钮输入的预定义样式