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>各浏览器都显示如下:
完美解决。感谢蓝色理想的一帮网友,阿门。
- ie6下子菜单宽度无法随内容增加宽度自适应
- IE6下li无法自适应宽度解决办法
- SlidingDrawer 自适应内容宽度
- WKWebView内容自适应宽度
- CSS自适应内容宽度示例
- Android WebView内容宽度自适应
- label宽度随着内容自适应
- 按钮在IE6、IE7 自适应宽度
- QTreeWidget 的标题栏宽度随内容自适应大小
- 宽度自适应
- 自适应宽度
- 实现侧栏固定宽度,内容栏宽度自适应
- bootstrap表格如何固定宽度或者自适应内容的宽度
- as3 TextField 宽度根据文本内容自适应
- 表格列td自适应内容宽度
- 返回顶部-右侧fixed+内容宽度自适应
- Android WebView 内容图片宽度自适应
- Html表格到一定宽度无法自适应
- 程序中在何处进行数据验证
- 拿到设计稿,如何切图
- 时间管理
- WebService CXF学习(进阶篇3):对象传递
- AOSP: eclipse 导入 android Settings 源码
- ie6下子菜单宽度无法随内容增加宽度自适应
- WebService CXF学习(进阶篇4):JAXB剖析
- android中延迟执行某个任务
- 取消一个本地svn目录与svn的联系
- 如何做好Code Review
- DropDownList下拉时分两列显示,或者带个表格显示 模拟CSS
- [Android]关于ListView等拖动时背景颜色的问题
- 在eclipse的android工程里引用android sdk之外的类和方法
- MFC控件ListBox如何自动滚动,显示最后一行