虚线边框的背景色

Question

我目前有这样的HTML结构：

<div id="holder">
    <div id="content">...</div>
    <div id="footer">...</div>
</div>

CSS如下所示：

* {
    margin: 0;
    padding: 0;
}

#content, #footer {
    background: #fff;
}

#footer {
    border-top: 1px dashed #ddd;
}

注意: holder 没有任何 background-color

---

我的担忧是，由于 holder 没有背景，footer 上边框的背景将会是透明的。

在我的情况下，将白色背景应用于 holder 不是选项（我不会解释为什么，但请相信我，这是不可能的）

我的问题是：

• 虚线边框的背景颜色将与我的 footer 相同（白色）还是与 holder 的背景颜色相同（无）？
• 它是否始终在所有浏览器中表现一致？

- ajax333221

---

你的测试产生了什么结果？你测试了哪些浏览器？ - Has QUIT--Anony-Mousse

@Anony-Mousse 我使用 Google Chrome 浏览器，一切看起来都很正常（白色背景）。但我真的担心在其他浏览器上输出效果会不同。因此，我正在寻找某种文档或专家建议来缓解我的担忧。 - ajax333221

边框没有背景颜色 - 在这些区域它们是透明的。它们会呈现出它们后面的任何颜色。 - Diodeus - James MacFarlane

Answer 1

1. The border belongs to your #footer div and will render with its background attribute - clear or otherwise.

2. I've tested the following CSS in Chrome, Safari, Firefox (sorry, no immediate IE access):

   * { margin: 0; padding: 0; }
   
   #content, #footer { background: #fff; }
   
   #content { background:#00F; }
   
   #footer {
       border-top: 5px dashed #f00;
   }
   

如果我漏掉了你的问题，请告知我，但我认为这就是你要问的内容。

盒子的内容、内边距和边框区域的背景样式由生成元素的“background”属性指定。边距背景始终是透明的。

来自 http://www.w3.org/TR/CSS2/box.html

- user559633