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中看起来很好，但在Internet Explorer 6和7看起来太高了。

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

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

这是一个已知的错误吗？我该如何解决？谢谢！

Answer 1

Hai victor，

以下是您的问题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 2

看起来像典型的盒子模型问题，其中IE 6,7错误地计算高度以包括顶部和底部的3px填充。你可以使用如下所示的盒子模型修复来解决这个问题。

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

Answer 3

最后我决定将其作为链接并显示：inline-block

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

3 个答案: