Question

我有以下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查看示例。提前致谢

Answer 1

http://www.curvycorners.net/

也许，这会对你有所帮助。 Javascript而不是图像。适用于IE6。

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

Answer 2

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

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

Answer 3

添加样式属性

 position: absolute;

向左侧，渐变部分完成了这一操作。

Answer 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上，删除边距和宽度声明。

圆角容器IE6

4 个答案: