Question

我有两个HTML页面编辑：fiddle如果您点击小提琴选项并在文档类型之间切换，您可以看到它们如何呈现的差异。

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="Styles.css" title="Styles" />
<meta charset="utf-8" />
</head>
<body>
<div class="page1" >

<div class="classTextbox1">
    <p>
        <span class="text165">
            this is a big string this is a big string this is a big string this is a big string this is a big string this is a big string 
        </span>
    </p>
</div>

</div>

</body>
</html>

和

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<link rel="stylesheet" type="text/css" href="Styles.css" title="Styles" />
<meta charset="utf-8" />
</head>
<body>
<div class="page1" >

<div class="classTextbox1">
    <p>
        <span class="text165">
            this is a big string this is a big string this is a big string this is a big string this is a big string this is a big string 
        </span>
    </p>
</div>

</div>

</body>
</html>

两者的样式表都是

p { margin-top: 0; margin-bottom: 0 }
table { border-collapse: collapse; border-spacing: 0 }
tr { vertical-align : top }

body { margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; word-wrap: break-word }

.text127 {font: 13px "Times New Roman", "Times New Roman", serif; line-height: 15px }
.text165 {font: 11px "Helvetica", "Helvetica", sans-serif; }
.classTextbox1 { position: absolute; left: 24px; top: 60px; width: 73px; height: 12px; overflow: hidden }
.page1{ position: absolute; top: 0px; width:816px; height:1008px }

除了doc类型，HTML页面是相同的，样式表是相同的。但是，当在Chrome（最新）和Firefox（32）中查看HTML5文档类型时，文本会比HTML4中的文本低几个像素。我不确定line-height是否是罪魁祸首，但我已经因为问题而迷失了方向。有任何想法吗？ TIA。

Answer 1

我认为这与您将字体大小放在span（内联元素）上有关。由于我不知道当你这样做时会发生什么，但显然当内联元素的字体大小与容器块元素不同时，线条高度会受到影响，这就好了。我使用jquery进行了几项测试，以使用HTML5 doctype警告FF中的行高。当您在span上设置11px的字体大小时，行高会返回17.xx，如果您在p上设置它，则返回13.xx

如果您将字体css放在段落标记中，它将解决您的问题

http://jsfiddle.net/ywu5107e/1/

p { 
    margin-top: 0;
    margin-bottom: 0; 
    font: 11px "Helvetica", "Helvetica", sans-serif; 
}

您也可以在HTML5 vs HTML4 - h1 tag rendered with extra space - how to remove?阅读，第一个答案是有帮助的

Doctype行高问题

1 个答案: