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>

我

#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;
}

希望看到 main-solutions 在左上角和右上角有两个绝对定位的 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< /code> 再者，div 内绝对定位的内容应该相对于容器定位，而不是相对于正文/页面。

此外，某些浏览器甚至不会显示没有内容的 div，因此该 div 的背景可能不会显示。您可能希望在 div 中添加一些内容。即使是单个   也可以工作。

Answer 2

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

除 IE 之外的所有浏览器都支持 border-radius，但即使是 IE 也可以通过使用一个名为 CSS3Pie。

（此外，CSS3Pie 还提供了 IE CSS 渐变背景，因此您可以一石二鸟）