Question

我一直在尝试创建左侧浮动的LI元素和内部的图像（作为“块”）。代码在所有浏览器中都能正常工作，IE 7（和6）除外，其中LI是垂直组织而不是水平组织。为了使代码在IE7中正常运行，我应该更改什么？（您也可以在http://jsbin.com/ilexa/edit找到代码。）

CODE：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">

<style>
ul {
    width:700px;
}
li {
    float:left;
    margin:10px;
}
li img {
    display:block;
    margin: 0 auto ;
    width:50px;
    height:50px;
}
</style>
</head>
<body>
<ul>
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li>
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li>
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li>
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li>
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li>
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li>
</ul>
</body>
</html>

Answer 1

是否有必要将<img>作为阻止？ <li>不能完全处理间距吗？另一种方法是将<img>声明为float: left - 或者甚至inline-block（请参阅Block-level elements within display: inline-block）。

IE7中具有块元素的自动边距

1 个答案: