displayinlineblock是什么意思(display inline block是什么意思)
您好,蔡蔡就为大家解答关于displayinlineblock是什么意思,display inline block是什么意思相信很多小伙伴还不知道,现在让我们一起来看看吧!
1、很多时候我们必须使一些块元素并排显示,一般想到的是必须使用浮动,但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG,所以很多时候不得不把这个块元素套在一个内联元素里面,然后给内联元素浮动和边距。
2、今天看到了怿飞、秦歌和乌龙茶关于display:inline-block的文章,很不错,综合一下,记录下来。
3、display:inline-block简单来说就是将对象呈递为内联对象,但是对象的内容作为块对象呈递。
4、旁边的内联对象会被呈递在同一行内,允许空格。
5、但是这个属性目前不是所有的浏览器都支持,只有Opera和Safari支持,FireFox3和IE8据说将会支持,Firefox2和IE使用特殊办法可以实现这种效果,下面就来探讨一下在Firefox2中有-moz-inline-stack和-moz-inline-box实现,但是这两个私有属性在某些情况下都会有异常,具体如下:display:-moz-inline-stack“当它所应用的外包装器(wrapper)的display为inline的时候,它所包含的a或button将无法点击或无法选取,需要通过position:relative还hack掉这个bug”--乌龙茶2、display:-moz-inline-box使用这一属性后,text-align就会出问题,必须使用Firefox的私有属性 -moz-box-align来解决所以,建议不要使用-moz-inline-box,还是使用-moz-inline-stack在IE(以下IE8除外)下,如果对内联元素,比如a或span元素,使用inline-block属性是有效的,似乎IE是支持的,其实是触发了IE的layout,从而拥有了inline-block属性的表症。
6、这样我们就有了一种在IE下实现display:inline-block效果的两种方法:先用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(原理:这是IE的一个经典bug,如果先定义了display:inline-block,然后再设置display回inline或block,layout不会消失),代码如下:div div 2、直接让块元素设置为内联对象(display:inline),然后通过zoom:1触发块元素的layout,代码如下:div 那么为了能够让所有浏览器支持display:inline-block,综合一下,最终的实现代码如下(参考怿飞:模拟兼容性的 inline-block 属性):display:inline-block; display:-moz-inline-stack; zoom:1; *display:inline; text-indent:-9999px;*text-indent:0;font-size:0;line-height:0; overflow:hidden; vertical-align:middle; width:?px; height:?px; /*?为任意非auto值*。
本文就讲到这里,希望大家会喜欢。
更多知识
-
如何治疗和预防甲流(服务窗·科学防疫)
原标题:如何治疗和预防甲流(服务窗·科学防疫)每年春季是甲流的高发季节,最近一些地方出现了散发病例。什么是甲流?有什么特点?如何治...烟燃烟灭つ 268 阅读
-
iPhone15的type-C接口玩手段,欧盟将重罚,苹果会妥协么?
据称苹果今年的iPhone15将会首次用上type-C接口,不过苹果为了赚取厚利可能会给type-C接口,而欧盟显然也早就为此做好准备,如果苹果执意如...﹏丶小迣界 284 阅读
-
微视频|同心逐梦 共向未来
原标题:微视频|同心逐梦 共向未来春风浩荡中,2023年全国两会通过法定程序把党的二十大作出的决策部署转化为全国人民的实际行动,胜利闭...■■俗人雅钦 186 阅读
-
东方甄选回应直播间疑似售假:会积极解决问题,请不要攻击主播
Tech星球3月16日消息,日前东方甄选被曝将养殖虾当野生虾卖引发热议。昨日晚间,东方甄选官方账号发文回应称,“东方甄选作为一家公司,会...原地等候已经远去的幸福 216 阅读
-
OpenAI 离成熟商业公司更近一步
发布 GPT-4 的同时,OpenAI 离成熟公司越近,离名字里的 “Open” 越远。GPT-4 无疑是一个更好的产品。写散文、诗歌、代码,这些 GP...床上小旋风 280 阅读
-
维珍轨道公司暂停运营一周:员工休无薪假,股价暴跌50%
3月16日消息,据外媒援引知情人士消息称,当地时间周三火箭发射公司维珍轨道决定暂停运营一周时间,并安排大部分员工休无薪假,期间寻求能...冷夕颜 236 阅读
-
推动世界共同发展繁荣 创造更加美好未来
原标题:推动世界共同发展繁荣 创造更加美好未来新华社北京3月13日电题:推动世界共同发展繁荣 创造更加美好未来新华社记者十四届全国人...而后的我们 220 阅读
-
瞭望·治国理政纪事丨马上就办 真抓实干
原标题:瞭望·治国理政纪事丨马上就办 真抓实干 ◆ 1991年2...愚人自愈 203 阅读
撰写回复