Question

所以这是我遇到的IE7中的另一个z-index问题。我找到了其他问题的解释，但没有修复。

当你有一个内联z-index为0的定位元素时，javascript不会返回正确的z-index。如果将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>

在IE7中打开它。 IE8中不存在该问题。

如果您使用IE7，我会解决它，否则您将需要使用代码并使用您用来模拟IE7的任何方法显示它：

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

我不知道有任何解决方案。欢迎提出任何意见。

Answer 1

如果我没有错，提供负z-index可以解决此问题。这里的开发人员遇到了这个问题，我相信这就是决议。

Answer 2

好的，我解决了这个问题。解决方案是确保您自己准确地获取内联内容并且不依赖于浏览器。

所以我编写了一个小对象（作为jquery插件），它解析了element的style属性中的内容并返回正确的值。我使用它来获取z-index，但我写了它以返回任何样式。您必须使用样式的真实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;
};

IE返回错误的z-index

2 个答案: