2010-05-18 29 views
0

以下是我的代码。可能是IE z-index错误?

当在ie浏览器中打开该页面,然后选择div中的文本,文本将显示一些阴影四边形空白。如果你在css class test1中删除了一行 z-index:0, ,ie会正确执行。

在我的项目中,z-index必须设置为大于零,所以我不能删除该行。

我发现一个解决方案是设置bg_img.filter =“”当pannel.z-index大于0时,那么ie也将工作良好。但不幸的是,也必须设置bg_img.filter.alpha。

那么我该怎么办?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script language="javascript" src="scripts/im_test.js"></script> 
    <title>test</title> 
    <style type="text/css"> 
     .test1 { 
     position:absolute; 
     background:#ffffff; 
     left:20px; 
     top:20px; 
     border:1px solid; 
     width:198px; 
     height:500px; 
     filter: progid:DXImageTransform.Microsoft.Shadow(color="#999999", Direction=135, Strength=5); 
     z-index:0; 
     } 
    </style> 
    <script> 

    function init() 
    { 
     var pannel = document.createElement ('div'); 
     var bg_img = document.createElement ('div'); 
     var head = document.createElement ('div'); 

     pannel.setAttribute('class', 'test1'); 
     pannel.setAttribute('className', 'test1'); 

     bg_img.style.cssText = "position:relative;left:0px;top:0px;" 
     + "width:198px;" 
     + "height:500px;" 
     + "filter:alpha(opacity=100);"; 

     head.style.cssText = "position:absolute;" 
     + "left:0px;" 
     + "top:0px;" 
     + "width:180px;" 
     + "height:20px;"; 

     document.body.appendChild (pannel); 
     pannel.appendChild(bg_img); 
     pannel.appendChild(head); 

     head.innerHTML = "<div>yusutechasdf</div><div>innerhtml</div>" 
    } 
    </script> 
    </head> 
    <body onload="init()"> 
    </body> 
</html> 

回答

0

IE有问题z-index: 0;尝试将其设置为1并相应地调整其他z-索引。