css学习之 display:inline-block;
设置display:inline-block;后的元素 就是一个格式化为行内元素的块容器( Block container );通俗讲就是:将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。
支持的浏览器:目前有 safri 和 chorme 及 ie8+ 和 firefox3.6+;ie6和ie7不支持该属性;
解决办法:
IE6/IE7的inline-block属性只对原生默认的内联元素(span, a, em......)有效,对于块级元素(div,p,ul......)无效。
In IE 6 and 7 inline-block works only on elements that have a natural display: inline.IE doesn't apply the value inline-block for the CSS display property on HTML elements that default to block level.
两个结论: 1、IE6/7不识别inline-block,只是触发了layout,表现跟inline-block块元素表现一样。
2、IE6/7不完全支持inline-block,只对内联元素有效。
ie6,7 块元素实现 display:inline-block效果:
div{
display: inline-block;
width: 350px;
min-height: 250px;
background-color: silver;
margin:0 5px; vertical-align:top; /*垂直方向 顶部对齐,base_line为基线对齐*/
*display: inline; /*只用于 ie6和ie7的hack*/
zoom:; /*激发 ie7的 hasLayout*/
_height:250px; /*通过min-height 和 _height(ie6hack) 来达到相同高度效果*/
}
块状元素怎么实现display:inline-block;效果:
方法有2个: 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 或float属性等)。代码如下:
div { display:inline-block; _zoom:1;_display:inline;} /*推荐*/
div { display:inline-block; _zoom:1;*display:inline;} /*推荐:IE67*/
触发haslayout有很多方法:
display: inline-block
* height: (任何值除了auto)
* float: (left 或 right)
* position: absolute
* width: (任何值除了auto)
* writing-mode: tb-rl
* zoom: (除 normal 外任意值)
Internet Explorer 7 还有一些额外的属性(不完全列表):
* min-height: (任意值)
* max-height: (除 none 外任意值)
* min-width: (任意值)
* max-width: (除 none 外任意值)
* overflow: (除 visible 外任意值)
* overflow-x: (除 visible 外任意值)
* overflow-y: (除 visible 外任意值)
* position: fixed
附我的demo代码一个:
<!DOCTYPE html>
<html>
<head>
<title>display:inline-block hack001.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
*{
margin: 0px;
padding: 0px;
} h3{
text-align:center;
margin: 5px auto;
} div{
display: inline-block;
width: 350px;
min-height: 250px;
background-color: silver;
margin:0 5px; vertical-align:top; /*垂直方向 顶部对齐,base_line为基线对齐*/
*display: inline; /*用于 ie6和ie7的hack*/
zoom: 1; /*激发 ie7的 hasLayout*/
_height:250px; /*通过min-height 和 _height(ie6hack) 来达到相同效果*/
} </style> </head> <body>
<p>inline-block 后的元素就是一个格式化为行内元素的块容器( Block container )</p>
<h3>测试 demo</h3>
<div>display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。
</div>
<div>
这段代码在ie8以上版本显示正常,已经其他的浏览器都是正常的,而唯独在ie6,7下无效,然后通过css hack进行处理后的css为: zoom:1;*display:inline;
</div>
<div>
在没有加 vertical-align:top 之前;显然,在垂直排列上有些错误。嗯,也不算错误吧,这是正确的表现,只不过不是我们想要的效果:这
是因为每个div的基线是和其父基线对其的; 通俗的说 inline 和 inline-block 元素默认的值是 基线;也就是说元素基线要和其父元素基线对齐;
总之,修正方法是很简单的: vertical-align: top; 但是在IE 6 和 7 中,依然无效:IE 7 也不支持 inline-block,但是我们可以欺骗它以使 div 好像是 inline-block 的。
怎么做呢?hasLayout,IE 的一个带来乐趣的神奇属性。你无法在一个元素上用 hasLayout: true; 显示地设置 hasLayout,或通过其他类似的简单方法,
但是可以用其他类似 zoom:1 的声明来激发它。(技术上来说,hasLayout 意味着,一个 hasLayout 设为 true 的元素负责渲染它自己及其子元素);
当我们给 div 加上 zoom:1 和 *display:inline(用于 IE6 和 IE7 的星号 hack) 之后,
在 IE7 中它们就可以像 inline-block 一样显示了; 只剩 IE 6 了:IE6 不支持 min-height,但是多亏它对 height 属性的不正确处理,我们可以用它来代替。
把 _height(IE6 下划线 hack) 设为 250px 使所有的 div 元素高度为 250px,并且如果它们的内容大于 250px,他们会扩大来适应。
其他所有的浏览器会忽略 _height。
</div>
<a href="###">这是基线</a> </body>
</html>
参考链接:http://www.cnblogs.com/yupeng/archive/2011/04/13/2014147.html
http://www.cnblogs.com/leejersey/archive/2012/07/11/2586506.html
等;另两个链接找不到了~~!
css学习之 display:inline-block;的更多相关文章
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- CSS学习摘要-盒子模型
注:全文摘要自网络开发者网站,当然间隔也会整理一些思路和格式排版添加进去. CSS框模型(译者注:也被称为"盒模型")是网页布局的基础 --每个元素被表示为一个矩形的方框,框的内容 ...
- CSS——display(Block none inline等)属性的用法
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...
- css学习--inline-block详解及dispaly:inline inline-block block 三者区别精要概括
*知识储备: 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行. 块级元素:是可以控制宽和高.margin等,并且会换行. 1.inline-block 详解 (1)一句话就是在 ...
- [CSS3] CSS Display Property: Block, Inline-Block, and Inline
Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...
- CSS中的display属性(none,block,inline,inline-block,inherit)
css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...
- CSS 基础 例子 display属性:block、inline和inline-block的区别
HTML中块级元素(block)和行级元素(inline):比如div就是常见的块级元素,span就是常见的行级元素. 可以通过css的display属性来设置一个元素到底是块级,还是行级元素:dis ...
- 理解display:inline、block、inline-block
要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...
- 大话css之display的Block未解之谜(一)
用了几年的css了,css中inline | block |inline-block|table|flex从来没有做过系统的整理和分析,网上的分析文章也很多,零散. 今天有空,就在这做一下整理分析 b ...
随机推荐
- 用NPOI实现导入导出csv、xls、xlsx数据功能
用NPOI实现导入导出csv.xls.xlsx数据功能 直接上代码 首先定义一个接口 如果需要直接操作文件的话,就自己在封装一次 然后定义csv类的具体实现 这个需要引入命名空间LumenWo ...
- Grub禁用UUID
这个属于一个个人喜好问题,我每次看到 df -h 的结果都很郁闷,根目录那一行设备是用uuid表示的,那一串字符真是够长的,看起来非常别扭,所以就自己修改了一下/etc/default/grub文件. ...
- backbonejs mvc框架
backbonejs mvc框架的增删查改实例 一:开发环境 coffeescript和nodejs需要先安装,没装网上自己查安装步骤. 代码编写环境及esp框架下载: esp框架下载地址:https ...
- 发挥jQuery的威力
发挥jQuery的威力 由于当前jQuery如此的如雷贯耳,相信不用介绍什么是jQuery了,公司代码中广泛应用了jQuery,但我在看一些小朋友的代码时发现一个问题,小朋友们使用的仅仅是jQuery ...
- 关于Jquery 序列化表单的注意事项
在JQuery 的serialize方法序列化表单的过程中,如果表单的name值最后有空格,会出现“+”号,查源码可见原因.这一小问题就浪费了半小时的时间,记录下来,备忘.
- ASP.NET MVC3开发-数据库篇之CodeFisrt开发(一)
本文讲述了在ASP.NET MVC3开发中M层使用Code Fisrt如何进行开发,由于作者对ASP.NET MVC3的学习不是很深,所以写的都是些基本的内容(写的如有不正确的地方请评论指正),适合初 ...
- 四.redis 事务
redis对事务的支持目前还比较简单.redis只能保证一个client发起的事务中的命令可以连续的执行,而中间不会插入其他client的命令. 由于redis是单线程来处理所有client的请求的所 ...
- 通过jquery来实现文本框和下拉框动态添加效果,能根据自己的需求来自定义最多允许添加数量,实用的jquery动态添加文本框特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- mmap学习
mmap学习 内存页: Linux是以页为单位来管理物理内存的,一页大小一般等于4096字节.页容量越大,系统中可能存在的内存碎片就越多. mmap将一个磁盘上的文件或者对象映射进内存.文件被映射到多 ...
- Unity3D中使用MiniJson解析json的例子
json: --------------------------------- { "name":"中国", "province&qu ...