字体/文本属性范围的 CSS/HTML5 问题答案

【问题标题】：CSS/HTML5 Issues with scope of font/text properties字体/文本属性范围的 CSS/HTML5 问题
【发布时间】：2015-12-20 21:20:18
【问题描述】：

我一直致力于建立一个网站（scarletorigami.com，如果有帮助的话）。我编写了一些 PHP，它会生成指向各个页面的带标题的缩略图链接列表，这些链接具有以下结构：

    #thumbnails {
      margin-top: 0;
      margin-bottom: 0;
      margin-left: auto;
      margin-right: auto;
      padding: 60px;
      width: 680px;
      background-color: #BBCCBB;
    }
    #thumb {
      margin: 0;
      padding: 0;
      width: 220px;
      height: 280px;
      background-color: #BBBBBB;
      text-align: center;
      font-style: italic;
      font-size: 100%;
      border: 1px solid #ccc;
    }
    #thumb:hover {
      border: 1px solid #777;
    }
    #thumb a {
      display: inline-block;
      width: 220px;
      height: 280px;
      text-decoration: none;
      margin: 0;
      padding: 0;
    }
    #thumb_image {
      width: 220px;
      height: 220px;
    }
    #caption {
      font-size: .65em;
      float: bottom;
      margin: 0;
      padding: 0;
      background-color: #AACCAA;
    }

<div id=thumbnails>
  <div id=thumb>
    <a href="link to content">
      <div id=thumb_image>
        image or "Can't find image" message
      </div>
      <div id="caption">
        Name
        <br />Author Date
      </div>
    </a>
  </div>
</div>

我遇到了许多关于 firefox 和 safari 上各种文本和字体属性范围的问题（目前无法测试任何其他属性）。

具体来说，如果我将 'text-decoration:none' 行移动到 #thumb a 部分以外的任何位置，则下划线会重新出现在缩略图标题中的所有文本上，并且我无法获得 'font-size:.65em ' 在 'caption' div 中生效。我可以通过将行移动到#thumb a 或#thumb 部分来更改整个部分的字体大小，但我不能以任何我尝试过的方式仅更改标题文本大小。在这两种情况下，使用 firefox 的检查元素功能表明 css 属性的继承对于所有其他属性都可以正常工作，因此似乎是某种怪癖或文本/字体属性如何被覆盖或传递的问题。

【问题讨论】：

你确定除了你给我们看的那个之外没有 css，这将解释为什么它会被覆盖？在旁注中，您制作了一个拇指列表，但在所有 html 元素上使用了一个 id，id 必须是唯一的，所以最好使用类。另外，您不应该将块元素放在内联元素中（a 中的 div）它会使您的 html无效并且不会被非 html5 网络浏览器很好地支持。因此，首先验证您的 html，然后更正您的 css。
html5 要求是有意的，因此我选择了标签。我不确定您对 ids 的评论是什么意思-您的意思是每个缩略图都应该有一个唯一的 id 吗？这似乎只会创建大量冗余标签，因为每个标签都有相同的样式。除了我展示的内容之外，还有其他 css，但它不适用于任何这些元素（例如，与更一般的 'a's 无关）编辑完整的 css 可以在 Scarletorigami.com/style.css 上找到
我是说在同一个 html 页面上您可能会有多个 #thumb、#thumb_image、...，如果是这样，您不能使用 id，但 class、id 是唯一标识符，它们不能位于同一页面上的多个 html 元素上。
哦！我不知道，谢谢你的信息。
关于 a 中的 div 的其他内容，请查看此问题：stackoverflow.com/questions/1827965/…

标签： css html font-size text-decorations

【解决方案1】：

根据 Lauren Fauvel 的建议，我更改了代码，以便为我的 div 提供类而不是 id，不知何故，这似乎解决了范围问题。我仍然不确定为什么首先会导致问题，但是如果正确编写的 html 没有问题，我想我应该考虑解决这个问题。

【讨论】：