html为什么会多两像素,html – 为什么这两个按钮呈现不同

我试图设置链接和按钮相等的样式.

为什么< button>和< a>使用以下css声明在FF中进行不同的渲染:(注意按钮角上的外边框以及两者的不同高度和长度).在Chrome中,它们呈现相同但具有外边框.在IE中它们被渲染为相同但没有圆形边框(IE8即不支持border-radius).

Heres a jsfiddle version and heres the css

button, a

{

background-color: #7da7d8;

color: #e7e4ed;

border: 3px solid #f7f7f7;

border-radius: 8px 8px 8px 8px;

text-align:center;

font-weight: normal;

display: inline-block;

line-height: 1.2em;

margin: 4px;

width: 120px;

padding: 6px;

font-size:1.2em;

text-decoration:none;

cursor: pointer;

}

请不要评论这样做的可用性问题 – 我有我的理由.

———-更新—————

从下面的评论我已经更新了css,check it out on jsfiddle现在我只是错过了设置高度相等,并以某种方式摆脱角落边界…