IE6和IE7兼容问题

zhouxiaobo123 2009-11-09 09:58:27

有如下结构



<!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>

<style type="text/css">

#warp{background-color:red;width:100%;height:500px;}

#left{background-color:blue;float:left;width:20px;height:100%;}

#right{background-color:green;float:right;width:20px;height:100%}

#mid{width:100%;background-color:yellow;height:100px;}

</style>

</head>

<body>

<div id="warp">

	<div id="left"></div>

	<div id="right"></div>

	<div id="mid"></div>

</div>

</body>

</html>

在IE7下，运行正常
但在IE6下，黄色的Mid区域会跑到整个div的下面
请问如何解决这两个版本的兼容问题

...全文

64 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

qqzeng-ip 2009-11-09

打赏
举报

相邻元素的边距会重叠，但是定位/浮动的元素不会跑
两个元素之间有内容/border/pading/margin，也不会跑

qqzeng-ip 2009-11-09

打赏
举报

ie6 ie7 firefox 对margin的解释都不同

zhouxiaobo123 2009-11-09

打赏
举报

楼上的确实能解决，谁来给我讲解哈原理呢？

xingqiliudehuanghun 2009-11-09

打赏
举报

学的人家幻宇的代码，究竟为什么也说不出个所以然

<!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>

<style type="text/css">

#warp{background-color:red;width:100%;height:500px;}

#left{background-color:blue;float:left;width:20px;height:100%;margin-right:-20px;}

#right{background-color:green;float:right;width:20px;height:100%;margin-left:-20px;}

#mid{background-color:yellow;height:100px;margin:0 20px 0 20px;}

</style>

</head>

<body>

<div id="warp">

    <div id="left"></div>

    <div id="right"></div>

    <div id="mid"></div>

</div>

</body>

</html>