我目前正在更新我的网站。但是，当我添加 !DOCTYPE 时，左侧菜单的布局不一样)
我知道我不是第一个在这个论坛上问这个问题的人，但我没有找到问题的答案。
我的理解是我的 CSS 有问题，所以这里是我使用的代码。
.gh {background:#C81919; text-align:right; vertical-align:top; padding-top: 20px;}
.gauche {background:#C81919; WIDTH:180; padding: 0 5px 0 5px; font-size:11pt; font-weight:bold; color:EADBC6; text-align:right; vertical-align:top;}
.dh {WIDTH:640; padding: 20px 0px 15px 1px; vertical-align:top; font-size:13pt;}
.droit {WIDTH:600; padding-left:41px; font-size:13pt; color:black; line-height:28px; text-align:justify; vertical-align:top;}
sup {line-height: 0;}
ul {margin: 0; padding: 0; list-style-type: none;}
li {margin: 0px 0px 6px 0px;}
#liste a:hover {background:url("marble1.gif"); color: C81919;}
#liste a {background-color: 000000; display: block; width: 180; padding: 6px 6px; color: EADBC6; text-decoration: none;}
#liste2 a {display: block; width: 180; padding: 2px 6px; color: EADBC6; text-decoration: none;}
#liste2 a:hover {background:url("marble1.gif"); color: C81919;}
最佳答案
文档类型控制浏览器如何理解您的 HTML、CSS 和 JavaScript。它可能会关闭浏览器的某些功能，或打开其他功能。因此，您需要确保编写的代码干净且格式正确。这不仅可以确保浏览器不会对您的代码产生混淆，还可以让您更轻松地管理您的期望。
虽然您上面的代码没有使用任何边缘特征，但它确实有几个问题:
WIDTH:180你需要在这里放一个单位。不要假设将为您提供px。background-color: 000000,color:EADBC6十六进制值需要以#开头。
这些只是可能会影响您的布局和演示的几个示例。
另一个重要主题是 box-model，它是浏览器通过添加内容宽度、填充、边框和边距来计算元素总宽度的方式。历史上的浏览器在过去对此有不同的理解，但今天我们可以将他们的理解与 CSS 中的 box-sizing 结合起来:
* { box-sizing: border-box; }
这指示所有现代浏览器根据框本身的边框设置它们的框模型(对于所有元素)。但是，此功能 是一项较新的功能，需要标准文档类型。因此，为确保大多数浏览器都能正常工作，请使用以下文档类型:
<!DOCTYPE html>
最后，确保这是您代码中的第一件事。在此之前没有任何内容，或者某些浏览器可能因此使文档类型无效。
关于html - 添加文档类型修改布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20805952/