0

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

4

4 回答 4

1

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

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

于 2012-05-18T21:24:34.050 回答
1

http://www.curvycorners.net/

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

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

于 2010-02-25T15:24:21.503 回答
0

添加样式属性

 position: absolute;

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

于 2010-02-22T16:12:00.330 回答
0

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

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

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

margin: 0 -3px 0 0;

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

margin: 0 0 0 -3px;

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

于 2010-02-22T16:15:46.390 回答