IE6下实现Width:auto

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

 

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

 

以下面的代码为例：

<style type="text/css">

    ul {

        height: 30px;

        overflow: hidden;

    }

    ul li {

        float: left;

        width: auto;

    }

    ul li a {

        display: block;

        height: 30px;

    }

</style>

<ul>

    <li><a href="#">Link 1</a></li>

    <li><a href="#">Link 2</a></li>

</ul>

 

如何避免这个问题呢？

 

Step 1 为IE6单独定制样式

 

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

 

1、hack 的手法。

 

#nav ul li {

     width:auto;

     _width:0;

     float:left;

}

 

2、使用条件表达式

 

<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />

<!--[if lt IE 7]>

    <link rel="stylesheet" href="/css/lt-ie7.css" type="text/css" media="screen" />

<![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;

}

 

怎么样，很神奇吧。