当前位置：首页 → 问答吧 → 100%高度在IE6下没达到效果···

100%高度在IE6下没达到效果···

时间：2011-05-31

来源：互联网

<!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>IE6下自适应高度测试</title> <style> *{ margin:0; padding:0;} .con_out{ width:500px; margin:10px auto 0;} .con{ width:100%; position:relative; overflow:hidden;} .box{ text-align:center; width:100%;} .box img{} .left,.right{ width:50%; height:100%; position:absolute; top:0px; background:#333; filter:alpha(opacity=50); opacity:.5;} .left{ left:0px;} .right{ right:0px;} </style> </head> <body> <div class="con_out"> <div class="con"> <div class="box"><img src="http://img4.cache.netease.com/sports/2011/5/29/2011052907352885a63.jpg" /></div> <div class="left"></div> <div class="right"></div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

在IE7 IE8 FF下，绝对定位的两个元素都能覆盖到各自的一半区域，可在IE6下，这两个区域的100%高度就无效了，只有18px高···
谁能帮我解惑···

作者: wwdsnn 发布时间: 2011-05-31

<!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>IE6下自适应高度测试</title> <style> *{ margin:0; padding:0;} .con{ width:200px; height:100px; margin:0 auto; position:relative;} .left,.right{ width:50%; height:100%; position:absolute; top:0px; background:#333; filter:alpha(opacity=50); opacity:.5;} .left{ left:0px;} .right{ right:0px;} </style> </head> <body> <div class="con"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: wwdsnn 发布时间: 2011-05-31

100%高度在IE6下没达到效果···

热门阅读

热门下载