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/

你可能感兴趣的文章

NIFI1.21.0通过Postgresql11的CDC逻辑复制槽实现_指定表或全表增量同步_实现指定整库同步_或指定数据表同步配置_04---大数据之Nifi工作笔记0056

查看>>

NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_根据binlog实现数据实时delete同步_实际操作04---大数据之Nifi工作笔记0043

查看>>

NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_配置binlog_使用处理器抓取binlog数据_实际操作01---大数据之Nifi工作笔记0040

查看>>

NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_配置数据路由_实现数据插入数据到目标数据库_实际操作03---大数据之Nifi工作笔记0042

查看>>

NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_配置数据路由_生成插入Sql语句_实际操作02---大数据之Nifi工作笔记0041

查看>>

NIFI从MySql中离线读取数据再导入到MySql中_03_来吧用NIFI实现_数据分页获取功能---大数据之Nifi工作笔记0038

查看>>

NIFI从MySql中离线读取数据再导入到MySql中_不带分页处理_01_QueryDatabaseTable获取数据_原0036---大数据之Nifi工作笔记0064

查看>>

NIFI从MySql中离线读取数据再导入到MySql中_无分页功能_02_转换数据_分割数据_提取JSON数据_替换拼接SQL_添加分页---大数据之Nifi工作笔记0037

查看>>

NIFI从PostGresql中离线读取数据再导入到MySql中_带有数据分页获取功能_不带分页不能用_NIFI资料太少了---大数据之Nifi工作笔记0039

查看>>

nifi使用过程-常见问题-以及入门总结---大数据之Nifi工作笔记0012

查看>>

NIFI分页获取Mysql数据_导入到Hbase中_并可通过phoenix客户端查询_含金量很高的一篇_搞了好久_实际操作05---大数据之Nifi工作笔记0045

查看>>

NIFI分页获取Postgresql数据到Hbase中_实际操作---大数据之Nifi工作笔记0049

查看>>

NIFI同步MySql数据_到SqlServer_错误_驱动程序无法通过使用安全套接字层(SSL)加密与SQL Server_Navicat连接SqlServer---大数据之Nifi工作笔记0047

查看>>

NIFI同步MySql数据源数据_到原始库hbase_同时对数据进行实时分析处理_同步到清洗库_实际操作06---大数据之Nifi工作笔记0046

查看>>

Nifi同步过程中报错create_time字段找不到_实际目标表和源表中没有这个字段---大数据之Nifi工作笔记0066

查看>>

NIFI大数据进阶_FlowFile拓扑_对FlowFile内容和属性的修改删除添加_介绍和描述_以及实际操作---大数据之Nifi工作笔记0023

查看>>

NIFI大数据进阶_FlowFile生成器_GenerateFlowFile处理器_ReplaceText处理器_处理器介绍_处理过程说明---大数据之Nifi工作笔记0019

查看>>

NIFI大数据进阶_FlowFile生成器_GenerateFlowFile处理器_ReplaceText处理器_实际操作---大数据之Nifi工作笔记0020

查看>>

NIFI大数据进阶_Json内容转换为Hive支持的文本格式_实际操作_02---大数据之Nifi工作笔记0032

查看>>