Question

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

他们的按钮看起来像这样：

enter image description here

它适用以下规则：

enter image description here

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

enter image description here

但是当我查看CSS时，应用规则没有区别。虽然我的元素是input，但我也有＃34;真实的＆＃34;我页面上的按钮，它们显示相同的行为。

enter image description here

我尝试使用或不使用重置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;
}

Answer 1

区别在于您使用的是button元素。

使用span元素，您将获得相同的结果。

Demonstration

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

Answer 2

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

http://jsfiddle.net/wn7vh/

希望有所帮助。

Answer 3

那是因为您使用了错误的HTML标记

你的例子中的css是一个带有＆＃34;按钮＆＃34;

的元素

如果您查看按钮构建器中的示例，您将看到他们不使用：

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

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

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

因此，如果您使用按钮的第二个版本，它将类似于按钮构建器中的示例

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

3 个答案: