May be an IE z-index bug?
- by baikaishiuc
Below is my code.
when open the page in ie browser, then select the text in div, the text will be replaced by some shadow quad blank . If you delete a line
z-index:0,
in css class test1, the ie will perform correctly.
In my project , the z-index must be set greater than zero, so I couldn't delete the line.
I found a solution is to set bg_img.filter = "" when pannel.z-index greater than 0, then ie will also working good. But unfortunately, the bg_img.filter.alpha must be set, too.
So how could I do?
test
.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>
