display:inline-block的深入理解 转

在使用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;...}

转载于:https://www.cnblogs.com/ideaplusl/archive/2011/08/29/2158811.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/263245.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

innosetup区分正常状态和静默安装状态(通过传递的参数)

命令行运行程序,如: myprogram.exe /abc /bcd 如果我们想获取其中的参数,“/abc”、“/bcd” 1. 直接使用innosetup自带的方法, GetCmdTail() 将所有参数作为一个字符串返回,安装和卸载都适用 注意:如果打…

测试计划排期内容和格式要求,测试邮件回复统一格式

公司最近在做一些测试流程规范,每次项目立项后,需要确认本次项目测试负责人,由测试项目负责人参加完需求评审后,协调资源 给出测试计划排期与对应子模块负责人员到项目经理处。 下面提供给大家一个测试计划排期内容和格式文档 2.测…

LeetCode—剑指 Offer 4、9、26、35、53

剑指 Offer 4. 二维数组中的查找、9. 用两个栈实现队列、26. 树的子结构、35. 复杂链表的复制、53 - I. 在排序数组中查找数字 I 题目描述: [4] 在一个 n * m 的二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺…

关于VerifyError

http://slurp.doc.ic.ac.uk/pubs/observing/linking.htmlhttp://blog.csdn.net/smilingleo?viewmodelist转载于:https://www.cnblogs.com/diyunpeng/archive/2011/08/30/2159108.html

Ubuntu 安装 JDK 问题

2019独角兽企业重金招聘Python工程师标准>>> 1. 下载并解压缩 2. mv到/usr/lib/jdk 3. 在~/.bashrc文件末尾添加环境变量 export JAVA_HOME/usr/lib/jdkexport CLASSPATH${JAVA_HOME}/libexport PATH${JAVA_HOME}/bin:$PATH 4. 重启终端,输入javac -vers…

Asp.net中水晶报表的使用

在我们对VS.Net中的水晶报表(Crystal Reports)进行研究之前,我和我朋友对如何将这个复杂的东东加入我们的Web应用有着非常的好奇心。一周以后,在阅读了大量的“HOWTO”文档之后,我们成功地将一些简单的报告加入到了我们…

Html颜色值 to RGB

//Html颜色值转换为RGBfunction HhtmlColorToRGB(color){var str"0x" color.substring(1,color.length);var rstr&0x0000FF;var g(str&0x00FF00)>>8;var b(str&0xFF0000)>>16;return b "," g "," r;}转载于:https:…

LeetCode—剑指 Offer 32 - I、II、III. 从上到下打印二叉树

剑指 Offer 32. 从上到下打印二叉树 题目描述: 使用层序遍历,遍历二叉树的三种题目。 [I] 从上到下打印出二叉树的每个节点,同一层的节点按照从左到右的顺序打印。 [II] 从上到下按层打印二叉树,同一层的节点按从左到右的顺序打印…

2011-8-31 身体欠佳

1. 前几日明显感到身体欠佳,熬夜很难受,以往搞到1点问题不大的, 老了啊。 经过几天作息时间的调整,回家不开电脑,23点之前上床,在加上食疗,今天缓过来了。 看来有必要把生活节奏放慢一点&#x…

java方法的定义格式

Java的方法类似于其他语言的函数,是一段用来完成特定功能的代码片段,声明格式为: [修饰符1 修饰符2 …..] 返回值类型 方法名( 形式参数列表 ){ Java 语句;… … … } 例如 public static int add(int a,int b){ int sumab; return sum; } 语法解释&a…

Scala学习(一)--Scala基础学习

Scala基础学习 摘要: 在篇主要内容:如何把Scala当做工业级的便携计算器使用,如何用Scala处理数字以及其他算术操作。在这个过程中,我们将介绍一系列重要的Scala概念和惯用法。同时你还将学到作为初学者如何浏览Scaladoc文档 1. 使…

Test live writer

拷贝屏幕来的图片 转载于:https://www.cnblogs.com/huobazi/archive/2006/11/19/565070.html

LeetCode—剑指 Offer 10 - I、II 斐波那契数列、青蛙跳台阶问题 63. 股票的最大利润

剑指 Offer 10 - I、II 斐波那契数列、青蛙跳台阶问题 63. 股票的最大利润 题目描述: [I] 斐波那契数列由 0 和 1 开始,之后的斐波那契数就是由之前的两数相加而得出。答案需要取模 1e97(1000000007),如计算初始结果为…

开始我的AI之旅

sina的博客总给我感觉周围都是娱乐新闻,乱七八糟的花边,混乱至极的排版,简直就是密集亲密症的家园。文章都叫博文啥的,好像很博学一样,压力好大。 回到博客园,发现界面还是如此简洁清晰,可惜当年…

Hadoop学习笔记—2.不怕故障的海量存储:HDFS基础入门

一.HDFS出现的背景 随着社会的进步,需要处理数据量越来越多,在一个操作系统管辖的范围存不下了,那么就分配到更多的操作系统管理的磁盘中,但是却不方便管理和维护—>因此,迫切需要一种系统来管理多台机器上的文件&a…

ASP.NET的错误处理机制之一(概念)

对Web应用程序来说,发生不可预知的错误和异常在所难免,我们必须为Web程序提供错误处理机制。当错误发生时,我们必须做好两件事情:一是将错误信息记录日志,发邮件通知网站维护人员,方便技术人员对错误进行跟…

改善用户体验之Alert提示效果

功能&#xff1a;替换传统弹出窗口提示 window.alert("");好处&#xff1a;界面美观&#xff0c;友善(最起码没有系统报警的声音&#xff09;。引用方便&#xff0c;纯js脚本文件实现所有效果。使用方法&#xff1a;<!DOCTYPE html PUBLIC "-//W3C//DTD XHTM…

LeetCode—<动态规划专项>剑指 Offer 42、46、47、48

剑指 Offer 42. 连续子数组的最大和、剑指 Offer 46. 把数字翻译成字符串、剑指 Offer 47. 礼物的最大价值、剑指 Offer 48. 最长不含重复字符的子字符串 题目描述&#xff1a; [42] [46] [47] [48] 考察重点&#xff1a;第42题要计算最大子数组和&#xff0c;考虑第i位…

常用JQuery插件整理

虽然自己也写过插件&#xff0c;但JQuery插件种类的繁多&#xff0c;大多时候&#xff0c;我还是使用别人写好的插件&#xff0c;这些都是我用了同类插件里较为不错的一些&#xff0c;今天就整理一下公开放出来。 UI&#xff1a; jquery.HooRay&#xff08;哈哈&#xff0c;自己…

操作系统核心原理-5.内存管理(下):段式内存管理

一、分页系统的缺点 分页系统存在的一个无法容忍&#xff0c;同时也是分页系统无法解决的一个缺点就是&#xff1a;一个进程只能占有一个虚拟地址空间。在此种限制下&#xff0c;一个程序的大小至多只能和虚拟空间一样大&#xff0c;其所有内容都必须从这个共同的虚拟空间内分配…