解决IE6 margin-left or maring-right负数双倍间距bug

2011-02-14 11:11:01 by 【6yang】, 767 visits, 收藏 | 返回

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>解决IE6 margin-left or maring-right负数双倍间距bug</title>
<style type="text/css">
body{
    padding:15px 0;
    margin:0;
    font:12px/1.5 Verdana, Geneva, sans-serif;
}
.items{
    background:#ccc;
    border:1px solid #333;
    width:500px;
    padding:0 100px;
    overflow:hidden;
    margin:-1px  auto 0;
}
.right_c{
    float:left;
}
.items .img{
    background:#00F;
    display:inline;/* for ie 6*/
    color:#fff;
    float:left;
    margin-left:-100px;
    width:100px;
}
.items .content{
    float:left;
    width:100%;
}
.items .date{
    background:#f30;
    display:inline;/* for ie 6*/
    color:#fff;
    float:right;
    margin-right:-100px;
    width:100px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body> 
<div class="items">
    <div class="img">img 100*200</div>
    <div class="content">The “Prisoner of Catz-kaban” spends most of his days sitting in his castle cage, surveying the world outside and hoping one day to be freed from hi... 12 min ago</div>
    <div class="date">2011-10-15</div>
</div>
<div class="items">
    <div class="img">img 100*200</div>
    <div class="content">The “Prisoner of Catz-kaban” spends most of his days sitting in his castle cage, surveying the world outside and hoping one day to be freed from hi... 12 min ago</div>
    <div class="date">2011-10-15</div>
</div>
<div class="items">
    <div class="img">img 100*200</div>
    <div class="content">The “Prisoner of Catz-kaban” spends most of his days sitting in his castle cage, surveying the world outside and hoping one day to be freed from hi... 12 min ago</div>
    <div class="date">2011-10-15</div>
</div>
</body>

</html>

 

分享到:
share

    图片原图

    loading

    loading