如何修改代码以与！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"。