IE9-下带有overflow属性的DIV被当作是其中positioned元素的父元素来决定定位_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下的问题吗？
回复讨论(解决方案)
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
没有啊 我在ie9下显示正常啊
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
没有啊 我在ie9下显示正常啊
多谢关注。
我的问题是，灰色的DIV布局在IE9下是根据黑色DIV定位的，所以显示在黑色DIV的右下角；我希望的结果是其按body定位，即显示在黑色DIV的左上角，就在Chrome的那张截图一样。
在我的测试环境上IE7 8 9都有这个问题。
我这里没问题啊 是不是dtd什么不对啊
或者干脆用那个黑色的div定位吧 吧A的position设为relative B的left和top都为0试试
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
没有啊 我在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模式。
不纠结了。决定换个solution做。感谢两位的回复。
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.