IE6下实现Width:auto-白红宇

IE6下实现Width:auto

阅读量：423 次

发布时间：2019-03-06

本文共 1056 字，大约阅读时间需要 3 分钟。

看了这个题目，很多人肯定觉得有点太老土了，IE6都快到末路了，不过这个方法确实非常经典，我觉得很有必要记下一笔。

在制作水平菜单的时候，我们经常使用ul和li元素，利用float属性让这些元素在水平的位置上对齐，同时利用width:auto来保持每个菜单随着内容的不同而变化宽度。在多数浏览器上，这个方法都很有效，只是除了IE6之外。

以下面的代码为例：

ul {

height: 30px;

overflow: hidden;

}

ul li {

float: left;

width: auto;

}

ul li a {

display: block;

height: 30px;

}

</style>

<ul>

</ul>

如何避免这个问题呢？

Step 1 为IE6单独定制样式

为了解决问题，我们需要将li元素的宽度设置为0,但是不能改变其他浏览器中的宽度，为此我们必须要用一些小手段，只能在IE6下生效，有三种办法：

1、hack 的手法。

#nav ul li {

width:auto;

_width:0;

float:left;

}

2、使用条件表达式

<!--[if lt IE 7]>

<![endif]-->

这样，只有IE版本小于7是才会加载CSS。

3、使用CSS选择器

#nav ul li {

width: 0;

float: left;

}

#nav ul > li {

width: auto;

}

IE6会忽略选择器，因为不支持，而其他浏览器则不会。

Step 2 Magic

最关键的让li宽度自适应的办法，是使用 white-space:nowrap ，如下：

#nav ul li {

width: 0;

float: left;

white-space: nowrap;

}

#nav ul > li {

width: auto;

}

怎么样，很神奇吧。

参考资料：

1、

转载地址：http://ftrkz.baihongyu.com/

你可能感兴趣的文章

Mysql学习总结（68）——MYSQL统计每天、每周、每月、每年数据 SQL 总结

查看>>

Mysql学习总结（69）——Mysql EXPLAIN 命令使用总结

查看>>

Mysql学习总结（6）——MySql之ALTER命令用法详细解读

查看>>

Mysql学习总结（70）——MySQL 优化实施方案

查看>>

Mysql学习总结（71）——MySQL 重复记录查询与删除总结

查看>>

Mysql学习总结（71）——数据库介绍（MySQL安装体系结构、基本管理）再回顾

查看>>

Mysql学习总结（72）——MySQL 开发者开发，设计规范再总结

查看>>

Mysql学习总结（73）——MySQL 查询A表存在B表不存在的数据SQL总结

查看>>

Mysql学习总结（74）——慢SQL！压垮团队的最后一根稻草！

查看>>

Mysql学习总结（75）——并发量大、数据量大的互联网业务数据库设计军规

查看>>

Mysql学习总结（76）——MySQL执行计划（explain）结果含义总结

查看>>

Mysql学习总结（77）——温故Mysql数据库开发核心原则与规范

查看>>

Mysql学习总结（78）——MySQL各版本差异整理

查看>>

Mysql学习总结（79）——MySQL常用函数总结

查看>>

Mysql学习总结（7）——MySql索引原理与使用大全

查看>>

Mysql学习总结（80）——统计数据库的总记录数和库中各个表的数据量

查看>>

Mysql学习总结（81）——为什么MySQL不推荐使用uuid或者雪花id作为主键？

查看>>

Mysql学习总结（82）——MySQL逻辑删除与数据库唯一性约束如何解决？

查看>>

Mysql学习总结（83）——常用的几种分布式锁：ZK分布式锁、Redis分布式锁、数据库分布式锁、基于JDK的分布式锁方案对比总结

查看>>

Mysql学习总结（84）—— Mysql的主从复制延迟问题总结

查看>>