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

Question

我一直致力于建立一个网站(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 属性的继承对于所有其他属性都正常工作，因此它似乎是关于如何覆盖或传递文本/字体属性的某种怪癖或问题。

Answer 1

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