CSS/HTML5 font/text 属性范围的问题

Question

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

    #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 属性的继承对于所有其他属性都正常工作，所以它似乎是某种怪癖或 text/font 属性被覆盖的方式或问题流传下来。

Answer 1

为了与 Lauren Fauvel 的建议保持一致，我更改了我的代码，以便为我的 div 提供类而不是 id，这似乎以某种方式解决了范围问题。我仍然不确定问题到底是为什么首先引起的，但如果写得正确 html 没有问题，我想我应该考虑解决这个问题。

CSS/HTML5 font/text 属性范围的问题

CSS/HTML5 Issues with scope of font/text properties

css

html

font-size

text-decorations