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

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;
}

fiddle http://jsfiddle.net/sUan8/

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

例如

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