标签: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模型即可。
<!-- 块级元素变"块级行内" --> <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; }
IE67实现inline-block布局,码迷,mamicode.com
标签:style blog class code java javascript width color line rgb 代码
原文地址:http://www.cnblogs.com/mr189/p/3702446.html