Question

我正在升级某些应用程序的doctype，我看到了布局的差异。我创建了一个小型演示来显示问题。旧doctype：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

新文档类型：

<!doctype html>

我看到了这种差异：注意第二行较低

当span元素具有font-size css属性时，会发生这种情况。这里发生了什么？我该如何调试？为什么布局不同？

包含旧doctype的页面的来源：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>The Transitional</title>
   </head>
   <body>
      <div>
         <h1>
            <div>
               <div>
                  <span>
                     <div><span>Is Your County Obese?</span></div>
                     <div><span style="font-size: 12px;">Select your county to see how it compares with other counties in the country</span></div>
                  </span>
               </div>
            </div>
         </h1>
      </div>
    </body>
</html>

具有新布局的页面的来源：

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>The HTML5</title>
   </head>
   <body>
      <div>
         <h1>
            <div>
               <div>
                  <span>
                     <div><span>Is Your County Obese?</span></div>
                     <div><span style="font-size: 12px;">Select your county to see how it compares with other counties in the country</span></div>
                  </span>
               </div>
            </div>
         </h1>
      </div>
   </body>
</html>

并排观点的来源：

<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">

    <title>The HTML5</title>

</head>

<body>
    <div style="display: flex" >
    <iframe src="doctype1.html" style="width: 30%; height: 300px;" ></iframe>
    <iframe src="doctype2.html" style="width: 30%; height: 300px;" ></iframe>
    </div>
</body>

</html>

Answer 1

这是一个结构合理的版本：

＆＃13;

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>The HTML5</title>
   </head>
   <body>
      <div id="top">
         <h1>Is Your County Obese?</h1>
         <p>Select your county to see how it compares with other counties in the country</p>
      </div>
   </body>
</html>

＆＃13;

将Doctype从XHTML 1.0升级到HTML5会导致简单html页面中的布局差异

1 个答案: