如何制作非圆角的小型原生浏览器按钮？

Question

我只想制作矩形按钮。浏览器表现得很奇怪。这个HTML：

<button style="height:19px; width: 37px; float: left;">19</button>
<button style="height:20px; width: 37px; float: left;">20</button>
<button style="height:21px; width: 37px; float: left;">21</button>
<button style="height:22px; width: 37px; float: left;">22</button>
<button style="height:26px; width: 37px; float: left;">26</button>
<button style="height:27px; width: 37px; float: left;">27</button>

...在不同的浏览器中产生这些不同的结果：

很奇怪，对吧？

至于我的实际问题，我喜欢矩形按钮。即使是较小的尺寸，我也能以任何方式看到它？

Answer 1

添加此项应重置所有内容，以便它们看起来相同的跨浏览器。

button {
    border: none;
    border-radius: 0;
    box-shadow: none;
    outline: none;
}

小提琴http://jsfiddle.net/sUan8/

然后只需添加自己想要的样式..

例如

button {
   border: 1px solid grey;
   border-bottom: none;
   box-shadow: 1px 1px -2px grey;
}

Answer 2

这是您的解决方案

CODE

button { border-radius:0; border:1px solid #000}

跨浏览器解决方案

button { 
     border : 0px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
     border-radius:7px;
}

JSFIDDLE http://jsfiddle.net/krunalp1993/6Ywvk/

Answer 3

您可能想尝试以下CSS属性。

border-radius: 0px;

Answer 4

添加border-radius:0px;和border:1px solid black;