代码之家 › 专栏 › 技术社区 › Mechlar

IE返回错误的Z索引

z-index internet-explorer-7 internet-explorer jquery javascript

0

Mechlar · 技术社区 · 15 年前

这是我在IE7中遇到的另一个z索引问题。我找到了一个关于这个问题的解释,但没有解决。

当有一个内嵌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>

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

如果您有IE7,我会修改它,否则您将需要使用代码并用模拟IE7所用的任何方法显示它:

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

我不知道有什么解决办法。欢迎发表任何评论。

2 回复 | 直到 15 年前

1

Woot4Moo 15 年前

如果我没有弄错,提供一个负的z索引可以解决这个问题。这里的一个开发人员遇到了这个问题,我相信这就是解决方案。

2

0

Mechlar 15 年前

好吧,我解决了这个问题。解决方案是确保你自己能准确地抓取内嵌的内容,而不依赖于浏览器。

所以我编写了一个小对象(作为jquery插件),它解析元素的style属性中的内容并返回正确的值。我用这个来获取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;
};