圆角容器 IE6答案

【问题标题】：Rounded corners container IE6圆角容器 IE6
【发布时间】：2011-01-19 16:10:45
【问题描述】：

我有以下 HTML 用于创建圆形容器，其中使用左图像、右图像、容器本身背景的渐变以及实际上通常是“阴影”的底部图像

我有以下 html，它定义了内联样式，因为它是从 .NET 控件生成的，但我可以检查浏览器并输出不同的样式。这在 IE 8 和 Firefox 3.5 中看起来很完美，但在 IE6 中看起来很糟糕。

我需要弄清楚如何让这个在 IE6 中看起来不错。

<div style="width: 305px; height: 194px;">
<div style="float: left; display: inline; background-image: url(images/LeftSide.png);
    height: 194px; width: 7px;">
</div>
<div style="float: right; display: inline; background-image: url(images/RightSide.png);
    height: 194px; width: 7px;">
</div>
<div style="padding-top: 5px; background-image: url(images/gradient.png);
    background-repeat: repeat-x; width: 291px; height: 194px; margin-left: 7px;">
    <h1> 
        Some text...
    </h1>
</div>

<div style="background: url('../images/small_shadow.png') no-repeat; width:305px;">&nbsp;</div>

您可以在https://www.msu.edu/~grossm51/sample/test.html 看到一个示例。提前致谢

【问题讨论】：

您能描述一下您遇到的具体问题吗？另外，您可以发布完整的 HTML 示例页面吗？我想看看您使用的是什么文档类型以及与此相关的所有内容。
问题是主要部分（其中包含文本的部分）...在 IE6 中呈现在两侧下方，我将很快包含完整的 HTML 页面
您可以在msu.edu/~grossm51/sample/test.html查看示例

标签： css cross-browser internet-explorer-6 rounded-corners

【解决方案1】：

http://www.curvycorners.net/

也许，这对你有帮助。 Javascript而不是图像。在 IE6 中工作。

一个免费的 JavaScript 库，用于创建华丽的圆角 HTML 块元素，即 DIV。支持抗锯齿、边框和背景图片。

【讨论】：

【解决方案2】：

IE6（和 IE7/8）中圆角的最佳解决方案是CSS3Pie。

这是一个特定于 IE 的脚本，它为旧版本的 IE 实现 CSS 标准 border-radius。

【讨论】：

【解决方案3】：

添加样式属性

 position: absolute;

左侧和渐变部分起到了作用。

【讨论】：

【解决方案4】：

这看起来像是 IE 6 三像素浮点问题的变体：

http://www.positioniseverything.net/explorer/threepxtest.html

要修复它，试试这个。向左浮动的 div 添加一个 -3px 的右边距：

margin: 0 -3px 0 0;

在右侧浮动的 div 中，添加一个 -3px 的左边距：

margin: 0 0 0 -3px;

最后，在内容 div 上，擦除边距和宽度声明。

【讨论】：