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

2013-11-13

IE9-下带有overflow属性的DIV被当作是其中positioned元素的父元素来决定定位例子：Chrome下的截图：我想要的

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



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>
 
 
<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下显示正常啊


多谢关注。

我的问题是，灰色的DIV布局在IE9下是根据黑色DIV定位的，所以显示在黑色DIV的右下角；我希望的结果是其按body定位，即显示在黑色DIV的左上角，就在Chrome的那张截图一样。

在我的测试环境上IE7 8 9都有这个问题。

楼主请给页面加上DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

你现在的页面在IE开发模式下看浏览器模式中的文档模式肯定是“杂项”quirks模式。

热点排行

CSS

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