圆角容器IE6

我有下面的HTML，我用它来创建一个使用左图像，右图像，容器本身的背景渐变和实际上通常是正常的底部图像的圆形容器一个“影子”圆角容器IE6

我有下面的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看到一个例子。由于事先

来源

2010-02-22 Ben

你能描述一下你的确切问题吗？另外，你可以发布完整的HTML示例页面吗？我想看看你使用的是什么文档，再加上一切。 – NotMe 2010-02-22 14:57:10

问题在于IE6中的主要部分（包含文本的部分）在IE6的两侧呈现，我将很快包含完整的HTML页面 – Ben 2010-02-22 15:13:45

您可以通过https：// www查看示例。 .msu.edu /〜grossm51 /样品/的test.html – Ben 2010-02-22 15:29:03

添加风格属性

position: absolute;

到左侧和梯度部确实起作用。

来源

2010-02-22 16:12:00 Ben

这看起来像漂浮在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-22 16:15:46

http://www.curvycorners.net/

也许，这会帮助你。 Javascript代替图像。适用于IE6。

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

来源

2010-02-25 15:24:21 Gennadich

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

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

来源

2012-05-18 21:24:34 Spudley

圆角容器IE6

回答

相关问题