从XHTML1转换到HTML5 doctype后，行高不工作 [英] line-height not working after change from XHTML1 Trans to HTML5 doctype

问题描述

我一直在使用的网站最初是使用XHTML 1.0 Transitional创建的 - 但是，因为我不喜欢它，我切换到HTML5的doctype。

A website that I've been working on was originally created using XHTML 1.0 Transitional - however, since I dislike it, I switched over to the HTML5 doctype.

当我刷新页面时，由于某种原因页面上的文本有一个微妙的变化。

When I refreshed the page, for some reason there is a subtle shift in the text on the page.

当行高低于某个像素通常是font-size）。
这抛出了我为登录的用户设置的菜单的视觉对齐。
例如，如果font-size设置为14像素， line-height：14px; 将显示与

The line-height stops working when it goes under a certain pixel (usually the font-size). This throws off the visual-alignment of the menu I have set up for logged in users. For example, if the font-size is set to 14 pixels, line-height:14px; will display the same exact thing as line-height:1px; when you know 1px should have overlapping text with any font-size over 1px.

当你知道1px应该有任何字体大小超过1px的重叠文本时，你可以看到一个示例：line-height：1px; 测试登录是：Te​​stPile / test。

You can view a demonstration at [removed, out of date] -> Test login is: TestPile/test. The menu shows up where you login (after you login that is).

有关如何获得line-height的反应的任何想法，通常应该这样做？

Any thoughts on how to get line-height to react as it normally should?

推荐答案

HTML5 doctype是更现代的doctype，在浏览器中引起标准模式。 XHTML 1.0 Transitional doctype导致有限怪癖模式。你使用HTML5 doctype得到的行为是正确的，所以你真的问我如何让行高行为像不应该？。

The HTML5 doctype, being the more modern doctype, causes standards mode in browsers. The XHTML 1.0 Transitional doctype causes limited-quirks mode. The behaviour you get with the HTML5 doctype is the correct one, so you are really asking "How do I make line-height behave like it shouldn't?". That's going to be difficult.

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

Here's a description of the differences in line-height calculations between limited-quirks(aka almost standards) and standards modes: http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29

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

You will need to embrace the standards mode behaviour and adjust your layouts accordingly.

这篇关于从XHTML1转换到HTML5 doctype后，行高不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！