display:inlin-block在IE6、IE7中无效该怎么办?

王小优
王小优
王小优
231
文章
0
评论
2015年10月5日 评论 2,017 752字阅读2分30秒

在Web前端开发中,display:inlin-block真是个非常实用的属性,但是块状元素在IE6、IE7下此属性会失效,想要知道怎么解决么?一起来看一下。

不得不说display:inlin-block真是个非常实用的属性,它能使行内元素和块状元素变成“行内块状”元素,简单的说就是被设置display:inlin-block后,元素会像行内元素一样从左到右排列,而同时又具有块状元素那样可以设置宽高。在很多时候网页布局就简单很多了,但是在IE6、IE7中,块状元素添加此属性却无法正常显示,该怎么办呢?

display:inlin-block在IE6、IE7中无效该怎么办?

在低版本IE下,display: inline-block只是触发了元素的layout。比如将display:inline-block设置到div上,只能保证这个div拥有块元素的特征(可以设置宽度,高度等),但还是会产生换行。

接下来要设置display:inline,使其不产生换行。将display:inline-block;*display:inline;写在同一个样式上,inline-block属性是不会触发元素的layout的,因此我们还要额外加上*zoom:1来触发layout。

兼容IE6、IE7的display:inline-block写法

直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1等)。

兼容各浏览器的代码如下:

  1. div {display:inline-block;*display:inline; *zoom:1;...}

这样处理后,就解决了display:inlin-block在IE6、IE7中无效的问题,也算是前端开发的一个小技巧,王小优在项目中遇到此问题,做笔记记录,同时也希望能够帮到有需要的人。

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
Safari罕见BUG 数字在a标签下display:none;无效 HTML

Safari罕见BUG 数字在a标签下display:none;无效

王小优在项目中发现一个非常罕见的BUG,某些数字在不规范的a标签中,在手机端Safari浏览器上会出现display:none;无效。 浏览器兼容性一直以来都是令前端工作人员头疼的一个问题,特别是当前...
解决IE7下设置float:right时元素自动换行异常情况 HTML

解决IE7下设置float:right时元素自动换行异常情况

E7浏览器下,本该并排显示的块状元素,添加了float:right属性后,浮动元素自动换行了,本文介绍解决办法。 不得不说IE是个让人又爱又恨的产品,对于前端开发者来说,IE系列版本的兼容性问题最令人...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: