IE7 文本渲染空间太大？答案

【问题标题】：IE7 text renders with way too much space?IE7 文本渲染空间太大？
【发布时间】：2014-01-28 16:49:28
【问题描述】：

IE 7 的渲染： Everything 其他的渲染：这两张图片之间存在一些问题，但我担心的是线条之间的间距太大。我将行距设置为 0px，然后顶部的“页面名称”看起来正确，但其他一切都搞砸了。将其他所有内容设置为 1.2，一切看起来都不错……但这会使其他所有浏览器都混乱。我该怎么办？我是否还缺少其他属性，或者我必须找到解决方法？

代码：

顶部“Page Name Here”周围的 div

#TopBar {
    padding: 0px;
    height: 50px;
    max-height: 50px;
    overflow: hidden;
    z-index: 250;
}

“Page Name Here”的实际h1元素

.TitleText {
    font-size: 2em;
    color: white;
    text-align: center;
    line-height: 1.2;
}

一切：

* {
    padding: 0px;
    margin: auto;
    font-family: Tahoma;
    line-height: 1.2;
}

我尝试稍微弄乱这些值，但我只能让它在 IE7 或其他所有东西上看起来都不错

【问题讨论】：

你的相关代码在哪里？
您是否创建了重置 CSS？像这样* {margin:0; padding:0;}
我的建议：不要介意。您不能期望所有浏览器都呈现完全相同的内容，总会有一些差异，特别是对于 IE7 等不兼容的浏览器。仅在它们破坏功能时尝试修复它们，但一点空间也不是什么大问题。
@HugoS.Mendes 是的，我用边距、内边距和行距做到了这一点
一定有其他的 CSS 级联向下干扰。 <h1.titleText> 应用了哪些其他未共享的 CSS？

标签： html css internet-explorer compatibility space

【解决方案1】：

在发布我的代码时想通了...

在我的代码中：

* {
    padding: 0px;
    margin: auto;
    font-family: Tahoma;
    line-height: 1.2;
}

默认情况下，我将所有内容的边距设置为自动，使 IE7 呈现除 0px 以外的其他值。通过将 margin-top 属性设置为 0px，它消除了标题栏顶部的多余空间并修复了截断问题。

【讨论】：

干得好，为其他人详细阐述并接受这个答案。

【解决方案2】：

使用这个 IE7 hack：

#TopBar { *height: 40px; }

【讨论】：