首页 > 代码库 > IE67实现inline-block布局

IE67实现inline-block布局

2024-07-02 07:35:44   225人阅读

 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: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;
        }

 

 


联系
我们