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

【问题标题】：How can I amend my code to be compatible with !doctype html如何修改我的代码以与 !doctype html 兼容
【发布时间】：2018-08-30 14:08:53
【问题描述】：

我创建了一个运行良好的网站，然后添加了 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>

【问题讨论】：

你的css和html真的像这样混合在一个文件里吗？因为那样不行。
没有我的css是外部的，我会编辑我的问题并添加更多的html
clearLogo 和 clearlogo 不是同一个类。见stackoverflow.com/questions/12533926/…
这是故意的@DanielBeck
@RhysEdwards — 故意让类名仅在某些字符的字母大小写上有所不同？那是……一个奇怪的设计选择。

标签： html css doctype

【解决方案1】：

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

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

【讨论】：