CSS圆角不起作用-为什么不起作用？

Question

<div id="main-solutions">
   <div id="main-solutions-top-left"></div>
   <div id="main-solutions-top-right"></div>
   <div id="main-solutions-body">
       blah blah blah
   </div>
</div>

的CSS

#main-solutions {
}

#main-solutions-top-left {
    position: absolute;
    top: 0px;
    left: 0px;
    background: url('../images/Top-Left-Gray-Corner.gif') no-repeat top left;
    width: 434px;
    height: 15px;
}

#main-solutions-top-right {
    position: absolute;
    top: 0;
    right: 0;
    background: url('../images/Top-Right-Gray-Corner.gif') no-repeat top right;
    width: 434px;
    height: 15px;
}

#main-solutions-body {
    background: url('../images/Gray-Gradient.jpg') repeat-x;
}

我期望看到主解决方案的圆角图像在左上和右上有两个绝对定位的div，然后是带有渐变的主体，但是当我使用HTML元素浏览器时，左上和右上角的div根本没有出现，非常混乱，为什么这些div被忽略了？

更新（对于其他答案感到困惑的人）：

问题的根本原因是，我不了解绝对值和相对值都除了为其指定元素本身的位置以外，还为其内容定义了新的坐标系。 在这里找到了很好的解释：

http://www.w3.org/TR/WD-positioning-970131#Positioned

从2.2节开始

像“绝对”定位的元素一样，“相对”定位为子元素定义新的坐标系，其原点位于第一个子元素的渲染位置

Answer 1

据我所知，角落应该出现在页面的左上和右上，因为您的容器div没有CSS position属性。 绝对定位的元素位置相对于具有最里面的父position比其它static （缺省值）。

尝试添加position: relative对于容器div的CSS。 它的工作原理与默认设置非常相似，但是（1）如果需要，您可以将div的位置移动一定量（这里并不是非常有用，但仍然可以），以及（2）由于该位置不再是static ，因此绝对div内放置的内容应相对于容器而不是正文/页面相对于容器自身定位。

此外，某些浏览器甚至不会显示不包含任何内容的div，因此该div的背景可能不会显示。 您可能需要在div中添加一些东西。 甚至只有一个  将工作。

Answer 2

您是否考虑过使用CSS border-radius实现此目的，而不是搞乱图像？

除了IE之外，所有浏览器都支持border-radius，但是即使使用聪明的小东西CSS3Pie，也可以使IE与其一起使用。

（另外，CSS3Pie还提供了IE CSS渐变背景，因此您可以用一块石头杀死两只鸟）