为什么相同的浏览器会以不同的方式呈现具有相同 CSS 的两个按钮？答案

【问题标题】：Why would the same browser render two buttons with the same CSS differently?为什么相同的浏览器会以不同的方式呈现具有相同 CSS 的两个按钮？
【发布时间】：2023-03-12 12:34:01
【问题描述】：

我需要比标准浏览器渲染更炫的按钮，因为我不是设计师，所以我想我会使用现有的解决方案。所以，我去了网上找到的a button maker，它给我做了一个看起来不错的按钮。我复制了 CSS，我自己的按钮在我的浏览器中看起来不同。在 Inspect Element 上，CSS 是相同的。

他们的按钮是这样的：

它应用了以下规则：

我的按钮看起来更丑，因为它的四面都有大边框：

但是当我查看 CSS 时，应用的规则没有区别。虽然我的元素是input，但我的页面上也有“真实”按钮，它们表现出相同的行为。

我尝试使用或不使用重置 CSS 来运行我的页面，但这没有任何区别。我总是看起来很丑。

当我在小提琴中运行他们的代码时，我get the same ugly result。

这发生在同一台机器上同一浏览器的两个不同选项卡中，Firefox 29。

这里又是有问题的代码：

button {
   border-top: 1px solid #bfd1ed;
   background: #5987d1;
   background: -webkit-gradient(linear, left top, left bottom, from(#2662c3), to(#5987d1));
   background: -webkit-linear-gradient(top, #2662c3, #5987d1);
   background: -moz-linear-gradient(top, #2662c3, #5987d1);
   background: -ms-linear-gradient(top, #2662c3, #5987d1);
   background: -o-linear-gradient(top, #2662c3, #5987d1);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #ffffff;
   font-size: 14px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
button:hover {
   border-top-color: #2662c3;
   background: #2662c3;
   color: #bdbdbd;
   }
button:active {
   border-top-color: #2662c3;
   background: #2662c3;
   }

body {
    background-color: #555555;
}

【问题讨论】：

你应该检查计算部分，在那里你会发现差异

标签： css rendering

【解决方案1】：

不同之处在于您使用的是button 元素。

我们使用span 元素，您将得到相同的结果。

Demonstration

您也可以采取相反的方法并尝试reset the button's style，但在我看来，设置跨度样式比删除这些样式更容易。

【讨论】：

嗯，这看起来不错，但我无法绑定 javascript 或使用这些提交表单。我的元素必须保留按钮和输入，有很多功能取决于它。
你不能"用这些绑定javascript或提交表单"？当然可以……
但是如果你真的想使用button元素，那么按照我给出的链接，这个问题有一些与重置按钮样式相关的不错的css。
我不是负责绑定的人，但负责绑定的开发人员说他不能，除非他使用某种框架，我们不希望在这些地方使用这种框架。使用按钮元素的决定对我们来说比样式更重要，因为我们的很多逻辑都依赖于它，即使它可以用 span 重新构建，对我们来说可能也不值得。
事实证明，EyeSpy 的简单想法确实非常有效。否则我可能会尝试从您的链接重置。你知道重置是否是跨浏览器兼容的吗？我找不到关于它的信息，就像另一个问题中的 OP 一样， moz 前缀似乎很可疑。

【解决方案2】：

只需将border: none; 放在您的按钮上：

http://jsfiddle.net/wn7vh/

希望对您有所帮助。

【讨论】：

感谢编辑！我打开了你的老小提琴下的链接，很失望，甚至没有注意到它是错误的链接！

【解决方案3】：

那是因为你使用了错误的 HTML 标签

您示例中的 css 用于具有“按钮”类的元素

如果您查看按钮构建器中的示例，您会发现它们没有使用：

<button name="My button"> A button! </button>

但他们使用链接标签并将其设置为按钮：

<a class="button" name="My button" href="#">A button!</a>

因此，如果您使用第二个版本的按钮，它将看起来像按钮构建器中的示例

【讨论】：