当前位置：首页 → 问答吧 → IE6下浮动的块元素的一个问题

IE6下浮动的块元素的一个问题

时间：2011-06-10

来源：互联网

这是第一种写法：不给display:inline; 但是把隐藏的元素删掉

<!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> <style> *{ margin:0; padding:0;} .carousel_1{ width:189px; height:100px; border-width:1px 0 1px 1px; border-color:#f00; border-style:solid; background:#0F0;} .at{width:20px; border-right:1px solid #00f; float:left; background:#FFF; height:100px;} .ac{ width:104px; float:left; height:100px;} .hidden{ display:none;} </style> </head> <body> <div class="carousel_1"> <div class="at">标题一</div> <div class="at">标题二</div> <div class="at">标题三</div> <div class="ac"> <p>333</p> <p>333</p> <p>333</p> </div> <div class="at">标题一4</div> </div> </body> </html>
提示：您可以先修改部分代码再运行

第二种情况：不删除隐藏元素，但是给浮动的块元素display:inline属性

<!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> <style> *{ margin:0; padding:0;} .carousel_1{ width:189px; height:100px; border-width:1px 0 1px 1px; border-color:#f00; border-style:solid; background:#0F0;} .at{width:20px; border-right:1px solid #00f; float:left; background:#FFF; height:100px; display:inline;} .ac{ width:104px; float:left; height:100px; display:inline;} .hidden{ display:none;} </style> </head> <body> <div class="carousel_1"> <div class="at">标题一</div> <div class="ac hidden"> <p>111</p> <p>111</p> <p>111</p> </div> <div class="at">标题二</div> <div class="ac hidden"> <p>222</p> <p>222</p> <p>222</p> </div> <div class="at">标题三</div> <div class="ac"> <p>333</p> <p>333</p> <p>333</p> </div> <div class="at">标题一4</div> <div class="ac hidden"> <p>444</p> <p>444</p> <p>444</p> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

第三种情况：浮动的块元素不给display:inline属性，并且也保留隐藏属性的元素，问题就来了····

<!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> <style> *{ margin:0; padding:0;} .carousel_1{ width:189px; height:100px; border-width:1px 0 1px 1px; border-color:#f00; border-style:solid; background:#0F0;} .at{width:20px; border-right:1px solid #00f; float:left; background:#FFF; height:100px;} .ac{ width:104px; float:left; height:100px;} .hidden{ display:none;} </style> </head> <body> <div class="carousel_1"> <div class="at">标题一</div> <div class="ac hidden"> <p>111</p> <p>111</p> <p>111</p> </div> <div class="at">标题二</div> <div class="ac hidden"> <p>222</p> <p>222</p> <p>222</p> </div> <div class="at">标题三</div> <div class="ac"> <p>333</p> <p>333</p> <p>333</p> </div> <div class="at">标题一4</div> <div class="ac hidden"> <p>444</p> <p>444</p> <p>444</p> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

注：这些代码在IE7、IE8、FF下都没问题，就是在IE6下会出现问题，求高手解惑（就是比较下前两段代码和第三段代码，我真是不知道为什么，解决问题也是瞎蒙的···）

[ 本帖最后由 wwdsnn 于 2011-6-10 23:03 编辑 ]

作者: wwdsnn 发布时间: 2011-06-10

期待有人能为我解惑