IE возвращает неправильный z-индекс - PullRequest
Новая
       6

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

0 голосов
/ 16 ноября 2010

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

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

Откройте это в IE7. Проблема не существует в IE8.

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

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

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

Ответы [ 2 ]

1 голос
/ 16 ноября 2010

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

0 голосов
/ 17 ноября 2010

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

Итак, я написал небольшой объект (как плагин 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;
};
...