IE67实现inline-block布局
inline-block可以定义元素为行内块级元素,即既具有行内元素同占一行的特点,又具有块级元素的box模型。但是IE67和其他浏览器的支持差别比较大:
1、行内元素使用inline-block变成"行内块级元素"。
行内元素直接inline-block即可,浏览器都识别,只是IE67中元素彼此之间存在间隙,这是由letter-spacing、word-spacing、font-size引起,需要区别处理;
2、块级元素使用inline-block变成"块级行内元素"
IE67块级元素定义inine-block其实只被识别为block,IE67要想让块级元素变成行内元素同时具备块级元素的box模型,只需要1)display:inline使元素同在一行,2)zoom触发haslayout使之可以定义box模型即可。
<!-- 块级元素变"块级行内" -->
<div class="wrap">
<p class="i-b">p1</p>
<p class="i-b">p2</p>
<p class="i-b">p3</p>
<p class="i-b">p4</p>
<p class="i-b">p5</p>
<p class="i-b">p6</p>
<p class="i-b">p7</p>
<p class="i-b">p8</p>
<p class="i-b">p9</p>
<p class="i-b">p10</p>
</div> <!-- 行内元素变"行内块级" -->
<div class="wrap">
<span class="i-b">span1</span>
<span class="i-b">span2</span>
<span class="i-b">span3</span>
<span class="i-b">span4</span>
<span class="i-b">span5</span>
<span class="i-b">span6</span>
<span class="i-b">span7</span>
<span class="i-b">span8</span>
<span class="i-b">span9</span>
<span class="i-b">span10</span>
</div>
.wrap {
font-size:;/* 所有浏览器 */
letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器 N 根据父级字体调节*/
*letter-spacing:normal;
word-spacing:-1px;/* IE6、7 */
}
.i-b {
display: inline-block;
*display:inline;
*zoom:;
}
.wrap .i-b{
width: 150px;
height: 50px;
border: 1px solid #ccc;
font-size: 12px;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
}
IE67实现inline-block布局的更多相关文章
- inline, block, and inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- inline,block,inline-block解析
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- inline-block,inline,block,table-cell,float
float:left ---------------------------------------------------------------------------------------- ...
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- 块状元素和内联元素 【inline block】
// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- CSS 概念 Block Inline Containing block
Block 元素 包括 "block-level box," "block container box," and "block box" ...
- [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 ...
- CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法
一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...
随机推荐
- Codeforces Round #321 (Div. 2) B 二分+预处理
B. Kefa and Company time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- 洛谷 [P1337] 平衡点
模拟退火练手 一道模拟退火的好题 结果一定势能最小 与模拟退火思路高度一致 #include <iostream> #include <cstdio> #include < ...
- ASP.NET的最新安全漏洞Important: ASP.NET Security Vulnerability
原文发布时间为:2010-09-20 -- 来源于本人的百度文章 [由搬家工具导入] 原文:http://weblogs.asp.net/scottgu/archive/2010/09/18/impo ...
- 快速排序Quick sort(转)
原理,通过一趟扫描将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据分别进行快速排序,整个排序过程可以递归进行,以此达到整个数据变成有序 ...
- Fiddler简介以及web抓包
Fiddler简介以及web抓包 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.Fiddler简介简单来说,Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联 ...
- POJ 2505 A multiplication game [博弈]
题意:两个人做游戏,每个人都可以在自己的回合里将数p乘以2到9之间的一个数,初始时p=1,谁先将p乘到大于等于n就算赢. 思路:一开始我算sg值,结果算来算去都没算明白... 后来看了别人题解,才豁然 ...
- 开启KindEditor代码高亮功能
KindEditor4.0 开始支持插入代码功能!!!如何使用插入代码功能实现前段页面代码高亮显示和后台代码维护显示!!! 1. 需要高亮显示代码的前台页面需要引用相应的css样式和js文件 < ...
- [BUG] CS0234: 命名空间“System.Web.Mvc”中不存在类型或命名空间名称“Ajax”(是否缺少程序集引用?)
写在前面 在浏览view的时候,突然出现这个错误,不过还是很好解决的. bug 解决方案
- Android Touch事件传递机制详解 下
尊重原创:http://blog.csdn.net/yuanzeyao/article/details/38025165 资源下载:http://download.csdn.net/detail/yu ...
- Windows网络编程 2 【转】
Windows网络编程使用winsock.Winsock是一个基于Socket模型的API,在Windows系统中广泛使用.使用Winsock进行网络编程需要包含头文件Winsock2.h,需要使用库 ...