跨浏览器的CSS行高问题 [英] CSS line-height issue across browsers

问题描述

我有一些按钮控件CSS行高：18px。一些是输入控件type =button，其他的是风格化的锚点，像输入控件一样显示为按钮。在FF3.6.12 / IE8中，它们显示相同的高度，但在IE7中，锚点的高度较短。 jsfiddle.net/DnGvF/rel =nofollow> 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属性hack ，以仅更改IE7的 height 和 line-height 和更低。你可以调整我选择的数字，如果你需要。


• 该黑客是无效的CSS，但使用它没有问题。它永远不会回来，咬你 - 这是一个安全黑客。

现在看起来IE7和以后的版本是一致的。

是的，这是一个有点kludgy，但至少它是在一起的CSS在一个地方，有一个明确的评论。

I have some button controls with CSS line-height: 18px. Some are input controls type="button", and others are anchors stylized to appear as buttons like the input controls. In FF3.6.12/IE8 they are displaying the same height, but in IE7, the anchors are shorter in height. How do I get them to display correctly in IE7?

解决方案

I took your demo: http://jsfiddle.net/DnGvF/

and added just this CSS at the end: http://jsfiddle.net/gRF9g/

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

Some explanation of what's going on there:

• There's a known bug in IE7 that overflow: visible fixes, related to the width of the button. Try looking at my demo in IE7 with and without it.
• I'm using the Star property hack to provide change the height and line-height for only IE7 and lower. You can tweak the numbers I picked if you need to.
• That hack is invalid CSS, but there's no problem using it. It's never going to come back and bite you - it's a "safe hack". Nevertheless, if you require 100% valid CSS, there are alternatives.

It now looks consistent between IE7 and the later versions.

Yes, this is a little kludgy, but at least it's all together in the CSS in one place, with a clear comment.

这篇关于跨浏览器的CSS行高问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！