1

我一直在做的一个网站最初是使用 XHTML 1.0 Transitional 创建的——但是，由于我不喜欢它，我切换到了 HTML5 文档类型。

当我刷新页面时，由于某种原因，页面上的文本发生了微妙的变化。

当行高低于某个像素（通常是字体大小）时，行高停止工作。这会破坏我为登录用户设置的菜单的视觉对齐方式。例如，如果字体大小设置为 14 像素，则显示的内容与您知道 1px 应具有重叠文本且任何字体大小超过 1px 时line-height:14px;完全相同。line-height:1px;

您可以在 [removed, out of date] -> Test login is: TestPile/test 查看演示。菜单显示您登录的位置（登录后）。

关于如何让 line-height 做出正常反应的任何想法？

4

2 回答 2

1

HTML5 doctype，作为更现代的 doctype，在浏览器中产生标准模式。XHTML 1.0 过渡文档类型会导致有限的怪癖模式。您使用 HTML5 doctype 获得的行为是正确的，所以您真的在问“我如何让 line-height 表现得像它不应该的那样？”。那会很困难。

以下是有限怪癖（又名几乎标准）和标准模式之间行高计算差异的描述：http: //msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29

您将需要接受标准模式行为并相应地调整布局。

于 2012-07-10T07:07:37.430 回答
0

我有一个类似的问题。在 quirks 模式<span>（和其他内联元素）中，行高可以比它们的父元素更小。在 HTML5 模式下，它的工作方式不同。我切换到<div>那里，它将像以前一样处理行高。或者您将内联元素更改为使用display:inline-block.

于 2015-03-04T17:38:33.780 回答