跨浏览器的CSS行高问题

Question

我有一些CSS行高的按钮控件：18px。有些是输入控件type =“button”，有些是程式化的锚点，显示为输入控件之类的按钮。在FF3.6.12 / IE8中，它们显示相同的高度，但在IE7中，锚点的高度较短。如何让它们在IE7中正确显示？

Answer 1

我参加了你的演示：http://jsfiddle.net/DnGvF/

并在最后添加了这个CSS：http://jsfiddle.net/gRF9g/

/* ie7 fixes */
.Footer input[type=button],
.Footer input[type=submit]
{
    overflow: visible;
    *height: 24px;
    *line-height: 15px
}

对那里发生的事情的一些解释：

• IE7中存在overflow: visible修复的已知错误，与按钮的宽度有关。尝试在IE7中使用和不使用它来查看我的演示。
• 我正在使用Star property hack仅针对IE7及更低版本提供height和line-height的更改。如果需要，你可以调整我选择的数字。
• 那个hack是无效的CSS，但使用它没有问题。它永远不会回来咬你 - 这是一个“安全的黑客”。尽管如此，如果您需要100％有效的CSS，还有其他选择。

现在IE7和更高版本之间看起来一致。

是的，这是一个小小的kludgy，但至少它在CSS中的所有地方都在一起，并有明确的评论。

Answer 2

老实说，如果IE7是唯一的问题，我只需要进行黑客攻击并提高行高：

*+html .button { line-height:24px }

如果您使用Modernizr之类的内容，则可以取消黑客并使用：

.ie7 .button { line-height:24px }

当然，另一种选择是实际追踪为什么IE7的行为方式，并相应地重写你的CSS，但没有任何发布的代码，我无法帮助你。

编辑：忘记了这种仅定位IE7的方法：

<!--[if IE7]><style type="text/css">.button{line-height:24px}</style><![endif]-->

Answer 3

IE中的按钮有额外的填充/边框/其他 - 它们的风格不如其他浏览器。