IE 7 Problèmes CSS

Question

Bon, je serai le premier à admettre que je suis assez terrible quand il s'agit de css, mais j'essaie ...: D J'ai cette fonction JS que j'utilise pour créer des coins arrondis en utilisant des images, au lieu de la div standard en div div. Je sais qu'il ya de meilleures façons, mais comment je l'ai fait:

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); 
} 

div est l'objet div étant passé à la $ fonction (« # de idDiv ») par exemple. gauche, milieu et droite sont les emplacements de l'image. leftwidth, rightwidth et height sont assez explicites.

Maintenant, le problème - En utilisant IE 8, la div (qui est une barre de titre arrondi) tire parfaitement lorsque vous utilisez l'a commenté la ligne

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>'); 

et la ligne active

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

Mais IE 7 ne fonctionne qu'avec la ligne active.

Les images de gauche et du milieu sont dessinées dans IE 7 mais pas l'image de droite et le contenu div (titre). La ligne active pour IE 7 et IE 8 rend les images gauche et droite inutiles car elles sont toutes les deux (gauche et droite) sur l'image centrale, donc toute transparence montre seulement l'image centrale et non l'arrière-plan du corps.

Toute aide est, comme d'habitude, vraiment appréciée.

Answer 1

Bien que je suis sûr que cela n'aidera pas Pour être complet, ma solution consistait à définir l'index z sur la div ajoutée à la place de la div passée:

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

Si vous n'êtes pas au courant de cela déjà, il y a une façon assez élégante en CSS pour créer un coin arrondi:

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

Ceci est uniquement pris en charge dans les navigateurs les plus récents (IE7, par exemple, sera encore avoir des bordures carrées).

De plus, j'ai remarqué que vous avez dit que c'était pour une barre de titre arrondie. Ne serait-il pas plus simple si vous utilisiez simplement un logiciel de retouche photo comme GIMP ou PS pour créer une image arrondie? Cela résoudrait le problème de la compatibilité inter-navigateurs ainsi que le problème de Javascript envahissant ne pas dégradant gracieusement (si JavaScript est désactivé, l'utilisateur ne reçoit pas l'image!)