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布局的更多相关文章

  1. inline, block, and inline-block

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  2. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  3. inline,block,inline-block解析

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  4. inline-block,inline,block,table-cell,float

    float:left ---------------------------------------------------------------------------------------- ...

  5. inline,block,inline-block的区别

    display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...

  6. 块状元素和内联元素 【inline block】

    // 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...

  7. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  8. CSS 概念 Block Inline Containing block

    Block 元素 包括 "block-level box," "block container box," and "block box" ...

  9. [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 ...

  10. CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

随机推荐

  1. Python实现knn

    #coding:utf-8 import numpy as np import operator import os def classify0(inX, dataSet, labels, k): d ...

  2. 关于微信小程序post请求数据的坑

    在post请求数据的时候,发现数据没有发送给后台,需要在请求头里加"Content-Type": "application/x-www-form-urlencoded&q ...

  3. 【转】Nodejs学习笔记(二)--- 模块

    目录 简介及资料 自定义模块 创建一个自定义模块 调用自定义模块 exports和module.exports 区别 exports和module.exports 覆盖 其它... 简介及资料 通过N ...

  4. MAC电脑安装Mysql服务器和Navicat for mysql客户端

    1.下载链接 Navicat for mysql客户端 链接: https://pan.baidu.com/s/1dGbzgbR 密码: i43g Mysql服务器 链接: https://pan.b ...

  5. Android下设置CPU核心数和频率

    现在的Android手机双核.四核变得非常普遍,同时CPU频率经常轻松上2G,功耗肯定会显著增加.而大多数的ARM架构的CPU采用的是对称多处理(SMP)的方式处理多CPU.这就意味着每个CPU核心是 ...

  6. 前端js、jQuery实现日期格式化、字符串格式化

    1. js仿后台的字符串的StringFormat方法 在做前端页面时候,经常会对字符串进行拼接处理,但是直接使用字符串拼接,不但影响阅读,而且影响执行效率,且jQuery有没有定义字符串的Strin ...

  7. hihoCoder #1586 : Minimum-结构体版线段树(单点更新+区间最值求区间两数最小乘积) (ACM-ICPC国际大学生程序设计竞赛北京赛区(2017)网络赛)

    #1586 : Minimum Time Limit:1000ms Case Time Limit:1000ms Memory Limit:256MB Description You are give ...

  8. (2)Django-pycharm部署

    pycharm 1.新建一个Django工程 2.部署 在pycharm下方的terminal终端中输入命令: python manage.py startapp app1 生成“app1”文件夹 3 ...

  9. 洛谷——1115 最大子段和(区间DP)

    题目描述 给出一段序列,选出其中连续且非空的一段使得这段和最大. 输入输出格式 输入格式: 输入文件maxsum1.in的第一行是一个正整数N,表示了序列的长度. 第2行包含N个绝对值不大于10000 ...

  10. UVA 11389 The Bus Driver Problem 贪心水题

    题目链接:UVA - 11389 题意描述:有n个司机,n个早班路线和n个晚班路线,给每个司机安排一个早班路线和一个晚班路线,使得每个早班路线和晚班路线只属于一个司机.如果一个司机早班和晚班总的驾驶时 ...