ホームページ > 記事 > ウェブフロントエンド > IE9ではオーバーフロー属性を持つDIV - 位置決めされた要素の親要素とみなされ、positioning_html/css_WEB-ITnoseが決定されます

IE9ではオーバーフロー属性を持つDIV - 位置決めされた要素の親要素とみなされ、positioning_html/css_WEB-ITnoseが決定されます

WBOYオリジナル: 2016-06-24 12:25:041240ブラウズ

例子：

<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下的问题吗？

回复讨论(解决方案)

b585974ae3b7dba3039af53a9593f9c4
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
ebeda52af7641f7e715679a8472f8c69
b2386ffb911b14667cb8f0f91ea547a7无标题文档6e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1

0c71f7e80fc34372640ff9b198511203
    13589ffb93d28ab2017eed88bdfa300d
        a34de1251f0d9fe1e645927f19a896e8
            f4aaef5f5db11ee09f45f55db912f8e8b90dd5946f0946207856a8a37f441edf
        fd273fcf5bcad3dfdad3c41bd81ad3e5
        a34de1251f0d9fe1e645927f19a896e8
            b6c5a531a458a2e790c1fd6421739d1c
                13589ffb93d28ab2017eed88bdfa300d
                    a34de1251f0d9fe1e645927f19a896e8
                        8984e90bc74bbc2fe43286b3ab71575fb90dd5946f0946207856a8a37f441edf
                        b6c5a531a458a2e790c1fd6421739d1c
                            705b4b5ef949020c958144dfda6a03f1
                                f1f62f6a6f2222a457340fbc21242bb0ABCff08446555d67280abe25aa6621a3d32
                        b90dd5946f0946207856a8a37f441edf
                    fd273fcf5bcad3dfdad3c41bd81ad3e5
                f16b1740fad44fb09bfe928bcc527e08
            b90dd5946f0946207856a8a37f441edf
        fd273fcf5bcad3dfdad3c41bd81ad3e5
    f16b1740fad44fb09bfe928bcc527e08
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
没有啊  我在ie9下显示正常啊

我这里没问题啊是不是dtd什么不对啊
或者干脆用那个黑色的div定位吧吧A的position设为relative B的left和top都为0试试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

不纠结了。决定换个solution做。感谢两位的回复。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：世界は絡み合っている。。兄弟姉妹_html/css_WEB-ITnose次の記事：世界は絡み合っている。。兄弟姉妹_html/css_WEB-ITnose

続きを見る

IE9ではオーバーフロー属性を持つDIV - 位置決めされた要素の親要素とみなされ、positioning_html/css_WEB-ITnoseが決定されます

回复讨论(解决方案)

関連記事