css dispay:inline-block在不同浏览器用法分析

将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。

按照这个解释:支持的浏览器有(ie8,ie9,chrome,firefox3.6+,由于我是用firefox3.6测试的) ,ie6,ie7 是不支持这个属性的。

ie6,7 如何支持这个属性呢?

对于块级元素,直接让块级元素成行内元素, 然后再触发layout。 {display:inline;zoom:1},可能有的同学会说,怎么说ie6,7不支持这个元素呢?

我不是经常在ie6,7的a标签、span 下使用这个属性吗?也起到了作用,这里理解可能有一个误区,使用display:inline-block是触发了layout的原因。

另外一种方式就是先触发块级元素的layout 属性,然后再让他成内联元素来展现。比如p元素,可以这样写 p{display:inline-block}p{display:inline}

display:inline-block可以用来做什么?

可以做的事情很多,可以写顶部的菜单,可以图文混排,可以内嵌block元素,也可以至如inline元素中,可以做信息卡片,如百度空间搭讪有缘人的卡片有缘人纪念日的固定宽度的书写,当然也可以做布局。 万变不离其宗,我觉得最本质的就是利用它的使元素为内联对象,但是内容做块状呈递。这点我们应该牢记。只要理解了它的本质东西,我们才可以以不变应万变,甚至可以创造自己的东西。

使用它要注意什么呢?

在使用了display:inline-block的元素之间有换行符,空格间隙问题。

1.块状元素被设置了display:inline-block后,ie6,7没有空格问题。其他浏览器都有。如下图所示:

在ie8,ie9,firefox可以通过使用font-size:0来解决,但是chrome很悲剧。还是有空白,我使用的是chrome10。不能清除。 可以通过添加letter-spacing属性

的值来解决,建议作者通过尝试来解决这个问题。我设置的值是-8px刚才好清除空白。我担心这会不会有相互覆盖问题。后来我将值调大到-28px,果然,在chrome中有覆盖,但是在其他的浏览器中没有。可见解决这个问题以chrome为主。

2.内联元素被设置了display:inline-block后,所有的浏览器都有换行,空白间隙问题

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来解决。

建议:最好不要使用firefox私有属性-moz-inline-box。
或许有朋友会对上面所说的ie也不支持display:inline-block属性,表示疑问或者反对。说:“我在ie中对a或者span等内联元素使用display:inline-block一直是有效的”。

其实不然,在ie中对内联元素使用display:inline-block,ie是不识别的,但使用display:inline-block在ie下会触发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;...}

 

时间: 2024-12-05 18:56:25

css dispay:inline-block在不同浏览器用法分析的相关文章

CSS网页制作技巧:兼容主流浏览器的背景颜色透明

文章简介:CSS网页制作技巧:兼容主流浏览器的背景颜色透明. 以前都是用jquery来写背景透明,方法简单,但是有缺点,脚本没加载完时,背景颜色是不透明的.如果换成在css里写好的话,效果就很好了..transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } 上面的几个属性分别是: opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持f

CSS中伪类及伪元素用法详解

原文:CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的读者可以自己尝试:   :active  大致效果为用鼠标点击时,元素增加特效,鼠标松开时,特效消失.多用在按钮的点击上.  写法: 这里id为box的是一div块,在css中首先设置了他的基本样式,下面为加入:active伪类后需要修改的样式. 未点击时: 点击之后: :active.:hove

Android开发之浏览器用法实例详解(调用uc,opera,qq浏览器访问网页)_Android

本文实例讲述了Android开发之浏览器用法.分享给大家供大家参考,具体如下: 一.启动android默认浏览器 Intent intent = new Intent(); intent.setAction("android.intent.action.VIEW"); Uri content_url = Uri.parse("http://www.jb51.net"); intent.setData(content_url); startActivity(inten

CSS中box(盒模式)的分析_CSS/HTML

本篇用box的图例,对CSS中box(盒模式)的分析,为学习CSS的读者建立了清楚的模型. W3C定义的盒模式如下: width和height定义的是Content部分的宽度和高度,padding border margin的宽度依次加在外面.背景会填充padding和content部分.但是由于浏览器设计上的问题,不同浏览器显示效果会有些不同.左右Margin加倍的问题当box为float时,IE6中box左右的margin会加倍 左面的inner的左面margin明显大于5px.这时候,定义

javascript中eval函数用法分析

  javascript中eval函数用法分析         这篇文章主要介绍了javascript中eval函数用法,实例分析了javascript中eval函数的使用技巧,非常具有实用价值,需要的朋友可以参考下 本文实例分析了javascript中eval函数用法.分享给大家供大家参考.具体分析如下: eval()只有一个参数,如果传入的参数不是字符串,则直接返回这个参数.否则会将字符串当成js代码进行编译,如果编译失败则抛出语法错误(SyntaxError)异常.如果编译成功则开始执行这

javascript属性访问表达式用法分析

  javascript属性访问表达式用法分析         这篇文章主要介绍了javascript属性访问表达式用法,实例分析了javascript属性访问表达式的功能与使用方法,需要的朋友可以参考下 本文实例讲述了javascript属性访问表达式用法.分享给大家供大家参考.具体分析如下: 属性访问表达式运算得到一个对象属性或一个数组元素的值.js为属性访问定义了2中语法: ? 1 2 expression.identifier expression["expression"]

JavaScript 浏览器兼容性总结及常用浏览器兼容性分析_javascript技巧

1. children与childNodes IE提供的children.childNodes和firefox下的childNodes的行为是有区别的,firefox下childNodes会把换行和空白字符都算作父节点的子节点,而IE的childNodes和children不会.比如: <div id="dd"> <div>yizhu2000</div> </div> d为dd的div在IE下用childNodes查看,其子节点数为1,而

PHP模板引擎Smarty中的保留变量用法分析_php实例

本文实例讲述了PHP模板引擎Smarty中的保留变量用法.分享给大家供大家参考,具体如下: 在 Smarty 中,有一些保留变量,它们是不需要 PHP 脚本去分配就可以直接使用,即不用使用 $_tpl->assign('var','value') 去分配. 1.在模板中访问页面请求的变量 {$smarty.get.user} == $_GET['user'] {$smarty.post.user} == $_POST['user'] {$smarty.cookie.username} == $_

php类中的各种拦截器用法分析_php技巧

本文实例讲述了php类中的各种拦截器用法.分享给大家供大家参考.具体用法分析如下: 1.__get( $property ) 访问未定义的属性时调用 复制代码 代码如下: class lanjie  {      function __get($name)      {          echo $name." property not found! ";      }  }  $ob = new lanjie();  echo $ob->g; 当我们调用对象$ob未定义的属性