IE 7 CSS Проблемы - PullRequest
Новая
       23

IE 7 CSS Проблемы

0 голосов
/ 27 августа 2010

Хорошо, я буду первым, кто признает, что я ужасен, когда дело доходит до css, но я пытаюсь ...: D У меня есть эта JS-функция, которую я использую для создания закругленных углов, используя изображения вместостандартный div в 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);
}

div - это объект div, передаваемый, например, в функцию $ ("# divid").слева, посередине и справа расположены местоположения изображения.leftwidth, rightwidth и height довольно понятны.

Теперь проблема - при использовании 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 (title).

Активная строка для IE 7 и IE 8 делает левое и правое изображения бесполезными, поскольку они (левое и правое) располагаются над центральным изображением, поэтому любая прозрачность показывает только центральное изображение, а нефон тела.

Любая и вся помощь, как обычно, очень ценится.

Ответы [ 2 ]

0 голосов
/ 02 сентября 2010

Хотя я уверен, что это никому не поможет - для полноты картины я решил установить z-index в добавленном div вместо переданного div: 

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);
}
0 голосов
/ 27 августа 2010

Если вы еще не знаете об этом, в CSS есть довольно элегантный способ создания закругленного угла: 

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

Это поддерживается только в более новых браузерах (например, IE7 будетвсе еще имеют квадратные границы).

Кроме того, я заметил, что вы сказали, что это было для закругленной строки заголовка.Не было бы проще, если бы вы просто использовали программное обеспечение для редактирования фотографий, такое как GIMP или PS, для создания округленного изображения?Это решило бы проблему кросс-браузерной совместимости, а также проблему навязчивого JavaScript-кода, который постепенно не ухудшается (если JavaScript отключен, пользователь не получает изображение!)

...