双边柜的BUG

代码 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>当浮动时，float与margin方向相同时，即同为right时，并且少了display:inline;会造成IE6的双边柜，即li距右边变成了10*2=20px</title>
<style type="text/css">
* {
    padding:0; 
    margin:0; 
    list-style:none;
}
ul { 
    width:390px; 
    margin:20px auto; 
    padding:0 0 10px 10px; 
    border:1px solid #ccc; 
    overflow:hidden;}
li { 
    float:right; 
    width:120px; 
    height:150px; 
    margin:10px 10px 0 0; 
    overflow:hidden;
    display:inline;
}
/* 当浮动时，float与margin方向相同时，即同为right时，并且少了display:inline;会造成IE6的双边柜，即li距右边变成了10*2=20px;
li { 
    float:right; 
    width:120px; 
    height:150px; 
    margin:10px 10px 0 0; 
    overflow:hidden;
}
*/
img{
border:none;
width:120px;
height:150px;
}
</style>
</head>

<body>
<ul>
    <li><img src="" /></li>
    <li><img src="" /></li>
    <li><img src="" /></li>
    <li><img src="" /></li>
    <li><img src="" /></li>
    <li><img src="" /></li>
</ul>
/* 当浮动时，float与margin方向相同时，即同为right时，并且少了display:inline;会造成IE6的双边柜，即li距右边变成了10*2=20px;<br/>
li { <br/>
    float:right; <br/>
    width:120px; <br/>
    height:150px; <br/>
    margin:10px 10px 0 0; <br/>
    overflow:hidden;<br/>
}<br/>
*/<br/>

</body>
</html>

 

posted @ 2010-08-26 09:54  知足常乐(Mr.Zhang)  阅读(278)  评论(0)    收藏  举报