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;

}

怎么样,很神奇吧。

参考资料:

1、Fix width:auto Floated Elements in IE 6

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏破晓之歌

CSS深入理解之overflow 原

如果overflow其中一个被赋值为visiable,而另一个被赋值为hidden或auto,那么这个会被重置为auto

903
来自专栏james大数据架构

Android如何制作漂亮的自适布局的键盘

  最近做了个自定义键盘,但面对不同分辨率的机型其中数字键盘不能根据界面大小自已铺满,但又不能每种机型都做一套吧,所以要做成自适应,那这里主讲思路。   这里最...

21510
来自专栏HT

绘制SVG内容到Canvas的HTML5应用

SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas...

2547
来自专栏前端杂货铺

position:sticky的兼容性尝试

开篇 笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,...

5879
来自专栏mukekeheart的iOS之旅

IOS学习——iphone X的适配

  说实话,对于一个刚入门iOS两个月的新手而言,在拿到这个任务的时候整个人都是懵逼的,怎么做适配?哪些地方需要适配?该怎么做?一个个问题搞得头都大了。   首...

3156
来自专栏GopherCoder

Django:web框架的学习(4:番外篇)

1313
来自专栏Nian糕的私人厨房

CSS banner图响应式居中显示

在 PC 网站首页,banner 图作为网页中最大的一张图片,在传达网页的的主要信息的同时,也吸引着浏览者的所有注意力,所以 banner 图的展示方式直接影响...

913
来自专栏前端开发之路

前端系列教学 - HTML基础

作为还在慢慢前端学习路上的一位自学者。我以写教程文章的方式来整理自己对于知识的理解,同时也希望能够把自己的理解作为一个分享。希望能够和大家共同进步,如有任何纰漏...

81511
来自专栏企鹅号快讯

前端小知识:为什么你写的 height:100% 不起作用?

作者:JiaXinYi https://segmentfault.com/a/1190000012707337 这个知识不算冷门的,但是用的时候可能还是会有些懵...

1965
来自专栏互联网杂技

移动端开发的一些技巧

开篇语 最近接手了一个移动端的项目。个人感觉是自己做得比较快而且比较健壮的一个。。。移动端最主要就是页面要适用不同的手机屏幕,ipad等。下面就分享一些技巧,让...

29510

扫码关注云+社区