ie6下子菜单宽度无法随内容增加宽度自适应

来源:互联网 发布:军用通信网络 编辑:程序博客网 时间:2024/05/17 22:03
<!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=utf-8" /><title>无标题文档</title><style type="text/css">*{ margin:0px; padding:0px;}.menu li{ width:100px; background:red; height:30px; line-height:30px; text-align:center; float:left; list-style:none;}.menu li a{}.menu_box{  border:1px solid; overflow:hidden; position:absolute; left:auto;}.menu_box dl{ float:left;}</style></head><body><div class="menu"><ul><li><a href="#">菜单1</a><div class="menu_box"><dl><dt>子菜单1</dt>
<dd><a href="#">内容1</a></dd></dl>
<dl><dt>子菜单2</dt><dd><a href="#">内容2</a></dd></dl><dl><dt>子菜单3</dt><dd><a href="#">内容3</a></dd></dl></div></li><li><a href="#">菜单2</a><div class="menu_box"></div></li></ul></div></body></html>

公司的项目要求做一个下拉菜单,menu_box能随着子菜单内容的增加,宽度能自动变长,ie6下怎么都调试不出来。

理想的效果如下


万恶的ie6下是这个样子:


后来在蓝色理想一帮热心的网友的帮助下,将.menu li 的width改成min-width;

ie6显示如下,基本上能够随内容自适应了,但是ie6不支持min-width,因此.menu li的宽度没有100px;

这不是我想要的结果。 可怜,杯具。


另外一个网友提出别把LI宽度给设置啦,给A设宽度。

代码如下

<!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=utf-8" /><title>无标题文档</title><style type="text/css">*{ margin:0px; padding:0px;}.menu li{ background:red; text-align:center; float:left; list-style:none; }.menu li a{ height:30px; line-height:30px; width:100px; display:block;}.menu_box{  border:1px solid; overflow:hidden; position:absolute; left:auto;}.menu_box dl{ float:left;}.menu_box  dd a{ display:inline;}</style></head><body><div class="menu"><ul><li><a href="#">菜单1</a><div class="menu_box"><dl><dt>子菜单1</dt><dd><a href="#">内容1</a></dd></dl><dl><dt>子菜单2</dt><dd><a href="#">内容2</a></dd></dl><dl><dt>子菜单3</dt><dd><a href="#">内容3</a></dd></dl></div></li><li><a href="#">菜单2</a><div class="menu_box"></div></li></ul></div></body></html>

各浏览器都显示如下:


完美解决。感谢蓝色理想的一帮网友,阿门。


原创粉丝点击