码迷,mamicode.com
首页 > 其他好文 > 详细

IE67实现inline-block布局

时间:2014-05-01 08:53:47      阅读:297      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   javascript   width   color   line   rgb   代码   

 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模型即可。

mamicode.com,码迷
    <!-- 块级元素变"块级行内" -->
    <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>
mamicode.com,码迷

 

mamicode.com,码迷
    .wrap {
            font-size:0;/* 所有浏览器 */
            letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器 N 根据父级字体调节*/
            *letter-spacing:normal;
            word-spacing:-1px;/* IE6、7 */
        }
        .i-b {
            display: inline-block;
            *display:inline;
            *zoom:1;
        }
        .wrap .i-b{
            width: 150px;
            height: 50px;
            border: 1px solid #ccc;
            font-size: 12px;
            letter-spacing: normal;
            word-spacing: normal;
            vertical-align: top;
        }
mamicode.com,码迷

 

 

IE67实现inline-block布局,码迷,mamicode.com

IE67实现inline-block布局

标签:style   blog   class   code   java   javascript   width   color   line   rgb   代码   

原文地址:http://www.cnblogs.com/mr189/p/3702446.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!