IE6下实现Width:auto

看了这个题目，很多人肯定觉得有点太老土了，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、Fix width:auto Floated Elements in IE 6

转载于:https://www.cnblogs.com/cocowool/archive/2012/07/05/2578458.html

IE6下实现Width:auto相关推荐

[css] 怎么IE6下在使用margin:0 auto；无法使其居中？
[css] 怎么IE6下在使用margin:0 auto;无法使其居中? 浏览器解析的问题,IE6下需要对居中的元素设置text-align:center属性使其margin:0 auto;生效. 个 ...
ie6,ie7下设置overflow:auto下滚动条不起作用
今天遇到一个比较特殊的情况:ie6,ie7下设置overflow:auto下滚动条出来了但是滚动条不起任何作用,但在火狐,ie8,ie9,谷歌等浏览器下正常显示.通过查询终于找到原因,只需要加一个po ...
ie6下常见的bug 调整页面兼容性
ie6下常见的bug 我们布局页面,首先符合标准,如何写一个页面的标准性? 但是ie6等浏览器本身就比较特殊,bug比较多,兵法云,知己知彼百战百胜.我们需要了解ie6的一些常见bug,这样,更好的调 ...
IE6下绝对定位的高度自适应
样式类似于聊天工具的resize,缩放窗口时消息区高度变化,其它元素高度不变,在chrome.FireFox下表现很好做,但IE6下不正常,消息区高度不能自适应变化. 如下图,正常的情况和IE6下不正 ...
IE6下position:absolute的定位BUG(转载)
position:absolute定位在IE6下存在left和bottom的定位错误问题: XHTML  <div style="p ...
在ie6下实现position-fixed的效果--------续集---对联效果（02）
在ie6下实现position-fixed的效果,这回是实现的对联效果,没有JS在里面的对联效果,但是没有JS的动感. 这个的原理是和<在ie6下实现position-fixed的效果>的 ...
使IE6下PNG背景图片透明的七种方法
PNG图像格式介绍: PNG是20世纪90年代中期开始开发的图像文件存储格式,其目的是企图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性.流式网络图形格式(Portable ...
解决IE6下CSS兼容性的两把神器
神器一.csshover.htc 解决IE6不支持非a标签的hover伪类. 引入方式:在样式表中引入例: body { _behavior: url(csshover.htc); } 应用: cl ...
IE6下css常见bug处理
1.双倍边距如下图所示,一个样式里面既设定了"float:left:"又有"margin-left:100px:"的情况,就呈现了双倍情况.如外边距设置为10 ...
[转]IE6下的CSS BUG枚举
原文链接:http://luinlee.com/405/ie6csschinese/ 1.终极方法:条件注释.缺点是在IE浏览器下可能会增加额外的HTTP请求数. 代码 <!–[if lte I ...

IE6下实现Width:auto

IE6下实现Width:auto相关推荐

最新文章

热门文章