简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > html tutorial > teks badan

IE9-下带有overflow属性的DIV被当作是其中positioned元素的父元素来决定定位_html/css_WEB-ITnose

WBOY
Lepaskan： 2016-06-24 12:25:04
asal
1238 orang telah melayarinya

例子： 

<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>
Salin selepas log masuk



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

IE9下的截图：


Chrome下的截图：


我想要的结果是Chrome下的，即divB按照body定位。可现在的情况是，实际项目中如果去掉divA的overflow属性，或是将divB拿出到divA外面去，都会导致大量工作量。现在有办法通过css或其他手段解决IE下的问题吗？


回复讨论(解决方案)





无标题文档


















ABC




没有啊 我在ie9下显示正常啊





无标题文档


















ABC




没有啊 我在ie9下显示正常啊

多谢关注。

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

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


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






无标题文档


















ABC




没有啊 我在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">
Salin selepas log masuk

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

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

Label berkaitan：
IE9-下带有overflow属性的DIV被当作是其中positioned元素的父元素来决定定位
sumber：php.cn
Artikel sebelumnya：江湖纠结啦。。哥哥姐姐们_html/css_WEB-ITnose Artikel seterusnya：小菜请教大家一个问题。_html/css_WEB-ITnose
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
2
1516
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
10
1680
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1423
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1353
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1402
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！