1. 爱易网页
  2. HTML教程
  3. IE9-停带有overflow属性的DIV被当作是其中positioned元素的父元素来决定定位

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

日期：2014-05-16　 浏览次数：20625 次

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>
 

相关资料更多>

  1. 页面布局,该如何解决
  2. CSS 式样
  3. CSS匣子模型小剖析
  4. 共享两个日前手机项目的HTML5的widget，星星评级以及标签选项卡，样式美观，iphone/android可用
  5. 分享几个令人撼动的JS和HTML5游戏
  6. ul设置了overflow:hidden,怎么通过js得知有内容被隐藏
  7. CSS实战——纯图片圆角Box的兑现技巧
  8. 为何合起来3个id标签定义，宽度不能100%占满
  9. 利用HTML5开发Android札记（下篇）