欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

ie9-停带有overflow属性的div被当作是其中positioned元素的父元素来决定定位

更新时间: 2014-01-05 00:53:25 责任编辑: Author_N1

 

IE9-下带有overflow属性的DIV被当作是其中positioned元素的父元素来决定定位
例子:

<body style="margin: 0px;">
    <table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="height: 50px;"></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="width: 50px;"></td>
<td>
<div id="divA" style="overflow: hidden; height: 100px; width: 100px; background-color: #000000;">
<div id="divB" style="position: absolute; left: 50px; height: 50px; width: 50px; top: 50px; background-color: #e0e0e0;">ABC</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
    </table>
</body>



divA (黑色)设置了style.overflow = "hidden",在IE9及以下浏览器中导致了其中的 divB (灰色,style.position = "absolute")按照divA而非body定位。请看截图。

IE9下的截图:


Chrome下的截图:


我想要的结果是Chrome下的,即divB按照body定位。可现在的情况是,实际项目中如果去掉divA的overflow属性,或是将divB拿出到divA外面去,都会导致大量工作量。现在有办法通过css或其他手段解决IE下的问题吗?
--参考方法--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body style="margin: 0px;">
    <table cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td style="height: 50px;"></td>
        </tr>
        <tr>
            <td>
                <table cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td style="width: 50px;"></td>
                        <td>
                            <div id="divA" style="overflow: hidden; height: 100px; width: 100px; background-color: #000000;">
                                <div id="divB" style="position: absolute; left: 50px; height: 50px; width: 50px; top: 50px; background-color: #e0e0e0;">ABC</div
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
没有啊  我在ie9下显示正常啊
--参考方法--
引用:
Quote: 引用:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 00:53:25
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/1051/
本文WWW.DOC100.NET DOC100.NET版权所有。