html - 我如何修改我的代码以与 !doctype html 兼容

Question

我创建了一个运行良好的网站，然后我添加了 doctype HTML，这似乎揭示了我的 CSS 中的一些错误。

自从添加 doctype 后，两个元素的样式就消失了。我可以使用 chrome 开发人员工具找到元素，但它们没有样式。只要我关闭 Doctype，它们就可以正常工作。

.clearlogo {
  z-index: 1;
  position: absolute;
  opacity: 0.1;
  height: 800px;
  left: -450px;
  top: -40px;
}

.clearlogo1 {
  z-index: 1;
  position: absolute;
  opacity: 0.1;
  height: 800px;
  right: -450px;
  top: -40px;
}

<div class="blueDiv">

  <img class="clearLogo" src="images/clearlogo.png">
  <img class="clearLogo1" src="images/clearlogo.png">

  <div class="wrapperSmall">
    <div class="centeredText white">
      <h2>WHY WE ARE UNIQUE</h2>
      <hr>
    </div>

    <div class="container">
      <div class="col">
        <i class="fas fa-tv"></i>
        <div class="info">
          <h2>Facilites</h2>
          <hr class="hrLong">
          <p>Etiam quis elementum sem, id lacinia arcu. In eros enim, malesuada non dictum sed, aliquet sed justo.</p>
        </div>
      </div>
      <div class="col">
        <i class="fas fa-thumbs-up"></i>
        <div class="info">
          <h2>Range of Sectors</h2>
          <hr class="hrLong">
          <p>Etiam quis elementum sem, id lacinia arcu. In eros enim, malesuada non dictum sed, aliquet sed justo.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

在标准模式下，类名被视为区分大小写。在怪癖模式下，它们不是。

.clearlogo 在您触发标准模式时停止匹配 class="clearLogo"。