兼容ie6/ie7的inline-block元素的两端对齐布局

02/19. 2013

inline-block元素的两端对齐在图文列表布局、瀑布流布局中有着广阔的应用空间。不过ie6、ie7下的兼容性一直是个硬伤。下面尝试用ie专有属性text-justify和一些css hack兼容ie6/7。
【点击这里查看DEMO】

CSS部分：

ul {
    list-style: none;
    width: 100%;
}
li {
    width: 140px;
    margin-bottom: 10px;
    padding: 10px;
    text-align: center;
    background: #ECC;
}
.text-justify {
    text-align: justify;
    *text-justify:inter-ideograph; /*IE私有属性*/
}
.justify {
    vertical-align: top;
    display: inline-block;
    *display:inline;
    *zoom:1;
}
.justify-last {
    width: 100%;
    height: 0;
    padding: 0;
    overflow: hidden;
}

HTML部分：

<ul class="text-justify">
    <li class="justify"><a href="javascript:;"><img src="./images/s1.jpg"/><br>
      <span>just for test</span></a></li>
    <li class="justify"><a href="javascript:;"><img src="./images/s1.jpg"/><br>
      <span>just for test just for test</span></a></li>
 
    <!--此处省略若干行-->
 
    <li class="justify"><a href="javascript:;"><img src="./images/s1.jpg"/><br>
      <span>just for test</span></a></li>
 
    <!--插入此行用以解决最后一行无法两端对齐的问题-->
    <li class="justify justify-last"></li>
</ul>

CSS/XML/XHTML/HTML , SOLUTIONS
inline-block , 两端对齐 , 兼容ie6 , 兼容ie7 , 布局
Frans.Lee
Write comment

diaplay:inline-block与text-indent在IE6和IE7下的问题

07/30. 2012

项目中使用a标签做按钮，考虑seo问题，还是在a标签中放置了文字，然后使用text-indent:-5000em;将文字移出可视范围，达到隐藏文字的效果。为了使a标签具有高度宽度，并且可以和多个按钮排列在同一行，使用display:inline-block处理。ie6与ie7虽然不支持display:inline-block属性，但是display:inline-block却可以触发它的hasLayout，使该内联元素表现出display:inline-block相似的效果。

a.btn{display:inline-block;width:150px;height:35px;text-indent:-5000em;background-image:url(imgurl);}

这在大多数现代浏览器下表现良好，而ie6与ie7下按钮消失了。看来，ie6与ie7下通过触发内联元素的hasLayout模拟的diaplay:inline-block效果，还是不完全与display:inline-block属性的表现一致。

解决办法：

使用display:block;或者float。很多时候这并不是个好的解决方案，虽然它们能解决ie6/ie7下按钮消失的问题，不过它们也会带来副作用。比如，display:block会把按钮变成块元素，不能直接与其他元素放在同一行，而float:left/right会使按钮向左或者向右浮动，给居中显示带来麻烦，如果使用了margin，还可能引发ie6下的双边距bug，需要另外处理…
使用position:absolute;也可以解决，缺点是欠灵活。
使用其他方法替代text-indent实现隐藏文字效果。比如：

font-size:0; line-height:0;

除此之外，还有一个莫名其妙的解决办法，就是给a标签前面加个空格。

input、select、button、textarea等表单元素的display默认都是inline-block,布局时需要“长点心”。

<!doctype html>

<html>

<head>

<title>兼容ie6/ie7的inline-block元素的两端对齐布局</title>

<style>

.box {

width: 60%;

height: 100%;

overflow: hidden;

margin: 20px auto;

text-align: justify;

background: #EEE;

}

ul {

list-style: none;

width: 100%;

}

li {

width: 140px;

margin-bottom: 10px;

padding: 10px;

text-align: center;

background: #ECC;

}

.text-justify {

text-align: justify;

*text-justify:inter-ideograph;

}

.justify {

vertical-align: top;

display: inline-block;

*display:inline;

*zoom:1;

}

.justify-last {

width: 100%;

height: 50px;

padding: 0;

overflow: hidden;

}

</style>

</head>

<body>

<span>just for test just for test test test just for test just for testtesttest</span></a></li>

</ul>

</div>

var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");

document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F4f44b0da0b58b5491533724bba5f2038' type='text/javascript'%3E%3C/script%3E"));

</script>

</div>

</body>

</html>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。