IE 7 CSS問題

Question

好吧，我會第一個承認我說css很糟糕，但我嘗試...：D 我有這個JS函數用於創建圓角使用圖像，而不是div中的標準div。我知道有更好的方法，但是這是多麼我已經做到了：

function applyHorizontalImageCornersSpecific(div, left, middle, right, leftWidth, rightWidth, height, type) { 
    var title = div.html(); 
    div.html(""); 
    div.append('<div>' + title + '</div>'); 
    div.css("position", "relative"); 
    div.css("z-index", "2"); 
    div.prepend('<img src="' + left + '" style=" position:absolute; width:' + leftWidth + ';z-index:-1;"/>'); 
    div.prepend('<img src="' + middle + '" style=" position:absolute;z-index:-2; width:100%; height:' + height + '; "/>'); 
    //div.prepend('<div style="position:relative; margin-left:' + leftWidth + ';margin-right:' + rightWidth + ';"><img src="' + middle + '" style="position:absolute;z-index:-2; width:100%; height:' + height + '; "/></div>'); 
    div.prepend('<img src="' + right + '" style=" position:absolute; width:' + rightWidth + '; right:0px;z-index:-1;"/>'); 
    div.css("height", height); 
} 

格是被傳遞給函數$（「＃DIVID」），例如在div對象。 左，中，右是圖像位置。左右寬度，右寬度和高度是很自我解釋的。

現在的問題 - 使用IE 8，在div（這是一個圓形的標題欄）使用註釋線

div.prepend('<div style="position:relative; margin-left:' + leftWidth + ';margin-right:' + rightWidth + ';"><img src="' + middle + '" style="position:absolute;z-index:-2; width:100%; height:' + height + '; "/></div>'); 

和有源線時繪製完美

div.prepend('<img src="' + middle + '" style=" position:absolute;z-index:-2; width:100%; height:' + height + '; "/>'); 

但是IE 7只適用於有效線路。

左側和中間圖像是在IE 7中繪製的，但不是右側圖像和div內容（標題）。

對於IE 7和IE 8的活動行都會使左圖和右圖無用，因爲它們都（左側和右側）位於中心圖像上，所以任何透明度只顯示中心圖像而不顯示正文背景。

任何和所有的幫助，像往常一樣，真的很感激。

Answer 1

雖然我確信這不會幫助任何人 - 的完整性我的解決辦法是設置所添加的格，而不是通過DIV中的z-index：

function applyHorizontalImageCornersSpecific(div, left, middle, right, leftWidth, rightWidth, height, type) { 
    var title = div.html(); 
    div.html(""); 
    div.append('<div style="z-index:5">' + title + '</div>'); 
    div.css("position", "relative"); 
    div.prepend('<img src="' + left + '" style=" position:absolute; width:' + leftWidth + ';z-index:-1;"/>'); 
    div.prepend('<div style="position:relative; margin-left:' + leftWidth + ';margin-right:' + rightWidth + ';z-index:-2;"><img src="' + middle + '" style="position:absolute; width:100%; height:' + height + '; "/></div>'); 
    div.prepend('<img src="' + right + '" style=" position:absolute; width:' + rightWidth + '; right:0px;z-index:-1;"/>'); 
    div.css("height", height); 
} 

Answer 2

如果你沒有意識到這一點已經有在CSS一個相當優雅的方式來創建一個圓角：

-moz-border-radius: 15px; /* where the 15px is the degree of rounding */ 
border-radius: 15px; 

這是在新的瀏覽器（IE7，例如，將仍然只支持有方形邊界）。

此外，我注意到你說這是一個四捨五入的標題欄。如果您只是使用像GIMP或PS這樣的照片編輯軟件來創建一個圓形圖像，會不會更容易？這將解決跨瀏覽器兼容性的問題以及突兀的JavaScript沒有優雅地降級的問題（如果JavaScript被禁用，用戶不會獲得圖像！）