虚线边框的背景颜色

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

---

我担心的是,footer由于holder没有任何背景,因此上边框的背景将是透明的.

holder在我的情况下应用白色背景不是一个选项(我不会解释为什么不,但相信我,这是不可能的)

我的问题:

• 虚线边框的背景与我的footer (白色)或背景颜色holder(无)相同？
• 它会一直以同样的方式表现出跨浏览器吗？

Answer 1

1. 边框属于您的#footer div,将使用其背景属性进行渲染 - 清除或其他.

2. 我在Chrome,Safari,Firefox中测试了以下CSS(抱歉,没有立即IE访问):

   * { 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