博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
IE6/7中不支持inline-block,如何解决
阅读量:6154 次
发布时间:2019-06-21

本文共 796 字,大约阅读时间需要 2 分钟。

1、IE6/7不识别inline-block,只是触发了layout,表现跟真实一样。

2、IE6/7不完全支持inline-block,只对内联元素有效。

 

IE下块元素如何实现 display:inline-block 的效果?

有两种方法:
1、先使用 display:inline-block 属性触发块元素,然后再定义 display:inline,让块元素呈递为内联对象(两个display 要先后放在两个 CSS 声明中才有效果,这是 IE 的一个经典 bug ,如果先定义了 display:inline-block,然后再将 display 设回 inline 或 block,layout 不会消失)。代码如下(…为省略的其他属性内容):
div {display:inline-block;...}
div {display:inline;}
2、直接让块元素设置为内联对象呈递(设置属性 display:inline),然后触发块元素的 layout(如:zoom:1 等)。代码如下:
div {display:inline; zoom:1;...}

 

最后问题可以这样解决:

.nav{text-align:center;}

.nav ul{display:inline-block !important;*display:inline;zoom:1;margin:0;padding:0;}

display:inline-block !important;能在FF,IE7以上的浏览器中实现,因为他们支持;

*display:inline能使IE6保持行内元素,zoom:1能触发IE6的layout,就能实现display:inline-block的效果。

转载于:https://www.cnblogs.com/jiangwenli/p/4902729.html

你可能感兴趣的文章
angularjs 控制器
查看>>
bat相关命令
查看>>
restful
查看>>
单线程爬虫实现
查看>>
锁与线程
查看>>
bzoj 3223: Tyvj 1729 文艺平衡树
查看>>
MySQL高级 之 order by、group by 优化
查看>>
JavaScript学习笔记(三)
查看>>
PyQt4学习笔记2:事件和信号
查看>>
windows系统实现mysql数据库数据库主从复制
查看>>
elasticsearch5.0.1集群排错的几个思路总结
查看>>
Linux 平台设备驱动模型
查看>>
前端学习之jquery
查看>>
RedHat6.2搭建FTP服务器
查看>>
DataTable学习笔记
查看>>
this指向问题
查看>>
原生查找DOM的方法
查看>>
Global variables vs. Host variables vs. Parameter markers
查看>>
百度电影推荐系统比赛 小结 ——记我的初步推荐算法实践
查看>>
HDU2033 人见人爱A+B
查看>>