在使用CSS实现表现的时候,会经常接触到display:inline-block这一属性,无论是初接触Web标准还是接触标准已久的朋友,大都会对这一属性感觉很迷惑和模糊。display:inline-block 将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。但对于这个属性不是所有浏览器都识别。支持的浏览器有:Opera、Safari但很遗憾,最流行的IE和Firefox却不支持这个属性(据说下一版本的Firefox将会支持display:inline-block)。不过Firefox下却有私有属性-moz-inline-box和inline-block形似,为什么是“形似”而不是“神似”呢?这是因为使用-moz-inline-box会带来很多意想不到的后遗症,比如使用这一属性后,text-align有时候就会有问题,还得改用Firefox的私有属性-moz-box-align来解决(谢谢aoao提供案例)。建议:最好不要使用Firefox私有属性-moz-inline-box。或许有朋友会对上面所说的IE也不支持display:inline-block属性,表示疑问或者反对。说:“我在IE中对a或者span等内联元素使用display:inline-block一直是有效的”。其实不然,在IE中对内联元素使用display:inline-block,IE是不识别的,但使用display:inline-block在IE下会触发layout(如果你对layout感觉到陌生,可以参看old9翻译的《On having layout》),从而使内联元素拥有了display:inline-block属性的表症。从上面的这个分析,也不难理解为什么IE下,对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout,而它本就是行布局,所以触发后,块元素依然还是行布局,而不会如Opera中块元素呈递为内联对象。延伸一个问题: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;...}
深入理解CSS的display:inline-block属性
来源:互联网 发布日期:2016-03-25 16:33:51 浏览:1483次
相关内容
- 历史与AI的距离:聊天机器人在历史学科科研中的应用
- 机器人行业调研-投资篇
- 全球首个OpenAI机器人诞生!Figure 01碾压马斯克擎天柱,10亿机器人大军正式启动
- OpenAI没有放弃的机器人梦想
- 能说会看会行动,OpenAI机器人,一出手就是王炸
- 人形机器人公司Figure获OpenAI等巨头投资 估值飙升至26亿美元
- 炸裂更新!这个最像人类的机器人又进化了,还能模仿马斯克
- OpenAI大模型加持机器人问世 神经网络受关注
- 中京电子:人形机器人相关领域客户尚在积极导入中 目前订单为小批量
- 手指灵活又精细:Sanctuary AI发布自主完成人类任务机器人
- 特斯拉招聘人形机器人 Optimus 用户手册撰写员,明年开始交付
- 机器人行业多个会议即将举行 人形机器人板块有望迎来催化
- 人形机器人再迎突破!OpenAI赋能Figure 多家机构给出相关分析
- 一大波爆款AI机器人频繁亮相背后:A股人形机器人“四大天王”雏形已现,优必选合作伙伴年报大幅预亏
- AI大模型时代,如何用RAG技术重塑传统智能客服问答机器人?
- OpenAI机器人惊艳面世!能对话、能思考、会学习
- 我用AI机器人,20分钟写了份调研报告
- 马斯克:AI发展速度前所未见,希望人形机器人“善待”人类
- 与OpenAI合作13天后,Figure人形机器人展示与人类对话能力
- 全球首个OpenAI机器人诞生,可与人自主互动丨科技周览
AiLab云推荐
最新资讯
本月热点
- 斯坦福家政机器人火了但又翻车了!多数是真人操控编排的
- 斯坦福团队发布新机器人Mobile Aloha,人形机器人将迎来产业元年?
- 我的同事是 GPT-4 机器人,我们在 Slack 上一起工作
- 谷歌起草“机器人宪法”,以确保 AI 机器人不会伤害人类
- 长江电力申请机器人巡检方法及系统专利,提高效率的同时也避免过多机器人参与到任务中造成碰撞风险
- 均普智能:公司会持续对人形机器人领域进行研发投入,当前没有交付丝杠终端产品
- 特斯拉“擎天柱”机器人视频涉嫌造假 马斯克“承认”
- 国际最新研发出人工智能机器人平台 改造蛋白质速度超过人类
- 国盛证券:未来大模型将会赋予机器人更强的能力
- 人形机器人“进厂”颠覆汽车制造?
热门排行
-
斯坦福家政机器人火了但又翻车了!多数是真人操控编排的
阅读量:152042
-
斯坦福团队发布新机器人Mobile Aloha,人形机器人将迎来产业元年?
阅读量:149895
-
我的同事是 GPT-4 机器人,我们在 Slack 上一起工作
阅读量:146367
-
谷歌起草“机器人宪法”,以确保 AI 机器人不会伤害人类
阅读量:142408
-
人形机器人崛起:OpenAI、微软洽谈投资Figure AI,望募资5亿美元
阅读量:86916
-
大疆回应停售青少年教育产品:将资源聚焦在大学生高校机器人赛事
阅读量:52234
推荐内容
- 2024第25届中国兰州国际医疗器械博览会
- 2024第九届中国西安丝绸之路国际旅游博览会
- 2024第27届重庆都市文化旅游节暨城际旅游交易会
- 2024年第25届广西广告展览会
- 2024宁夏(银川)国际广告节
- 2024中国(青岛)国际户外用品暨房车露营装备博览会、2024中国(青岛)国际体育用品、健身器材暨泳池设施装备博览会、第五届新电商产业博览会
- 2024第二十三届中国西部国际广告节
- IBS 2024第十二届生物质能源与有机固废资源化利用高峰论坛
- 2024第二届中国(西安)国际消防技术装备展览会
- 2024长三角国际环保产业展览会
- FEC2024第17届广州国际服装供应链博览会
- 2024第60届沈阳医疗器械展3月28日盛大召开!!!
- 2024第二届成渝经济圈表面工程博览会
- 2024南京充电桩展览会
- 2024第十四届中国(郑州)塑料产业博览会
- 2024HOTELEX第32届上海国际酒店及餐饮业博览会 HOTELEX上海展
- 海名·2024上海火锅食材及用品展览会
- 2024第29届中国(北京)国际美博会
- 2024宁波国际文具展
- 第二十届中国(重庆)国际润滑油、脂、添加剂、养护用品及技术设备展览会
- 2024上海国际酒店工程设计与用品博览会