IE возвращает неверный индекс z

Question

Итак, вот еще одна проблема с z-индексом в IE7, с которой я столкнулся. Я нашел объяснение проблемы еще где, но без исправления.

Когда у вас есть позиционированный элемент с встроенным z-индексом 0, javascript не возвращает правильный z-индекс. Если z-index установлен в элемент в таблице стилей, он вместо этого вернет z-index. Я получаю тот же результат, используя jQuery.

Сделать HTML-файл со следующим:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
     $('button').click(function(){ 
     alert($('#mainBox').css('zIndex')); 
     }); 
    }); 
</script> 
<style type="text/css"> 
    #mainWr { 
     position: relative; 
     z-index: 2; 
     border: 1px solid #333; 
     width: 200px; 
     height: 200px; 
    } 
    #mainBox { 
     z-index: 1; 
     border: 1px solid #555; 
     width: 100px; 
     height: 100px; 
     position: absolute; 
     top: 50px; 
     left: 50px; 
    } 

</style> 

<div id="mainWr"> 
    <div id="mainBox" style="z-index: 0;"></div> 
</div> 
<br /> 
<button type="button">Show #mainBox z-index</button> 

Open, что в IE7. Проблема не существует в IE8.

Я jsfiddled, если у вас есть IE7, в противном случае вам нужно будет использовать код и отобразить его с любым методом, который используется для эмуляции IE7:

http://jsfiddle.net/dalelarsen/DndnM/

Я не знаю ни решений. Любые комментарии приветствуются.

Answer 1

Хорошо, я решил это. Решение состоит в том, чтобы убедиться, что вы точно уловите то, что является встроенным, и не полагайтесь на браузер.

Итак, я написал небольшой объект (как плагин jquery), который анализирует то, что находится в атрибуте стиля элемента, и возвращает правильное значение. Я использую это для получения z-индекса, но я написал его для возврата любого стиля. Вы должны пройти в стиле, запрашиваемом с использованием реального имени css стиля, например. 'z-index' вместо 'zIndex'. Может быть, в какой-то более поздний день я переписал его, чтобы объяснить случай верблюда.

Во всяком случае, здесь:

jQuery.fn.inlineStyle = function(stylesName){ 

    var allStyles = this.attr('style'); 

    var allStylesArr = allStyles.split(';'); 
    var allStylesObj = {}; 
    for (var i = 0; i < allStylesArr.length; i++) { 
     var parts = allStylesArr[i].split(':'); 
     allStylesObj[$.trim(parts[0]).toLowerCase()] = $.trim(parts[1]); 
    } 
    var rStyleVal = false; 
    if (allStylesObj[stylesName]) rStyleVal = allStylesObj[stylesName]; 
    return rStyleVal; 
}; 

Answer 2

Если я не ошибаюсь, предоставляя отрицательный z-index, эта проблема решается. Разработчик здесь столкнулся с этой проблемой, и я считаю, что это была резолюция.