圓角容器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

回答

相關問題