MSIE 6、7中的按钮高度问题

Question

我试着用这个来设计一个按钮的样式：

button.plusone { width: 3.5em; padding: 3px 0 3px 0; text-align: center; }

使用以下css重置：

button {margin:0;padding:0;}
button {font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
button {*font-size:100%;}

在Safari和Firefox中看起来不错，但在In 6和7中看起来太高了。

Safari，good saf http://img190.imageshack.us/img190/1954/safay.png

MSIE6，错误的msie http://img693.imageshack.us/img693/8300/75657632.png

这是一个已知的bug吗？我怎么才能修复它？谢谢!

Answer 1

最后，我决定将其作为一个链接并显示:inline-block

Answer 2

海维克多，

以下是您的问题http://jehiah.cz/archive/an-even-better-ie-button-width-fix的修复方法

这个http://particletree.com/features/rediscovering-the-button-element/

或尝试设置

button {
width: auto;
overflow: visible;
line-height: 0px;
}

Answer 3

看起来像是典型的盒子模型问题，IE6，7错误地计算了高度，将顶部和底部的3px填充包括在内。您可以使用如下所示的盒子模型hack来修复此问题。

button.plusone {height: 20px;  width: 3.5em; padding: 3px 0 3px 0; text-align: center; }
* html button 
{ 
    height: 20px; /* For IE 5.x browsers */
    w\idth: 26px; /* For IE 6,7 browsers */
}

关于众所周知的盒子模型问题和解决方法的更多信息：http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41