Question

问题：对于下面提到的代码，ie7在带有图像的两行div之间呈现额外的垂直填充，我已经尝试了很多方法来解决它..但是一无所知。我真的需要你的帮助。该代码在符合标准的浏览器中工作正常

HTML代码：

<div id="screensaver_items">
    <div class="header clearfix">
        <div id="header_left">
            <h3>screensavers</h3>
        </div>
        <div id="header_right">
            <h3><a href="#">see all<span>></span></a></h3>
        </div>    
    </div>
    <div class="content">
        <a href="#"><img src="images/dark_night.jpg"></a>
        <div class="caption">
            <div class="shade">
            </div>
            <p>thor</p>
            <div  class="social_links">
                 <a href="#" class="share">social_icon</a>
                 <a href="#" class="message">social_icon</a>
            </div>      
        </div>
    </div>
    <div class="content">
        <a href="#"><img src="images/dark_night.jpg"></a>
        <div class="caption">
            <div class="shade">
            </div>
            <p>thor</p>
            <div  class="social_links">
                 <a href="#" class="share">social_icon</a>
                 <a href="#" class="message">social_icon</a>
            </div>      
        </div>
    </div>
    <div class="content">
        <a href="#"><img src="images/dark_night.jpg"></a>
        <div class="caption">
            <div class="shade">
            </div>
            <p>thor</p>
            <div  class="social_links">
                 <a href="#" class="share">social_icon</a>
                 <a href="#" class="message">social_icon</a>
            </div>      
        </div>
    </div>
    <div class="content no_pad">
        <a href="#"><img src="images/dark_night.jpg"></a>
        <div class="caption">
            <div class="shade">
            </div>
            <p>thor</p>
            <div  class="social_links">
                 <a href="#" class="share">social_icon</a>
                 <a href="#" class="message">social_icon</a>
            </div>      
        </div>
    </div>
    <div class="content">
        <a href="#"><img src="images/dark_night.jpg"></a>
        <div class="caption">
            <div class="shade">
            </div>
            <p>thor</p>
            <div  class="social_links">
                 <a href="#" class="share">social_icon</a>
                 <a href="#" class="message">social_icon</a>
            </div>      
        </div>
    </div>
    <div class="content">
        <a href="#"><img src="images/dark_night.jpg"></a>
        <div class="caption">
            <div class="shade">
            </div>
            <p>thor</p>
            <div  class="social_links">
                 <a href="#" class="share">social_icon</a>
                 <a href="#" class="message">social_icon</a>
            </div>      
        </div>
    </div>
    <div class="content">
        <a href="#"><img src="images/dark_night.jpg"></a>
        <div class="caption">
            <div class="shade">
            </div>
            <p>thor</p>
            <div  class="social_links">
                 <a href="#" class="share">social_icon</a>
                 <a href="#" class="message">social_icon</a>
            </div>      
        </div>
    </div>
    <div class="content no_pad" >
        <a href="#"><img src="images/dark_night.jpg"></a>
        <div class="caption">
            <div class="shade">
            </div>
            <p>thor</p>
            <div  class="social_links">
                 <a href="#" class="share">social_icon</a>
                 <a href="#" class="message">social_icon</a>
            </div>      
        </div>
    </div>

CSS :
*{margin: 0;padding: 0;}
body {
font-family: 'Conv_Aller_Rg',Arial,verdana,sans-serif;
font-size:11px;color:#333;line-height: 2em; margin: 0;padding: 0;
 }
a,img{
border: none;
}
#screensaver_items {
margin: 0;
padding: 0;
width: 756px;
}
#screensaver_items .content {
float: left;
padding-right: 10px;
padding-bottom: 10px;
}
#screensaver_items .header{
position: relative;
}
#screensaver_items .last {
padding-right: 0;
}
#screensaver_items #header_left h3{
text-transform: uppercase;
color: #e10000;
font-size: 18px;
font-family: 'Conv_Aller_Bd',Arial,verdana,sans-serif;
    font-weight: normal;
margin-bottom:10px; 
}
#screensaver_items #header_right{   
    position: absolute;
right: 19px;
    top: 6px;
 }
.clearfix:after {
content: " ";
display: block;
clear: both;
visibility: hidden;
 line-height: 0;
 height: 0;
}
.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}



* html .clearfix {
    height: 1%;
    }
    #screensaver_items #header_right h3{
    text-transform: uppercase;
    color: #e10000;
    font-size: 12px;
     font-family: 'Conv_Aller_Bd',Arial,verdana,sans-serif;
     font-weight: bold;
     *margin-bottom:0px !important;
    *margin-top: 0px !important;
    }
    #screensaver_items #header_right h3 a{
     text-decoration:none;
    color:#e10000;
     font-weight: normal;
    }
    #screensaver_items #header_right h3 a span{
    background: url("../images/arrow-icon-small.png") no-repeat scroll 0 0 transparent;
    padding-left: 10px;
    position: absolute;
    right: -27px;
    text-indent: -9999px;
    top: 4px;
    width: 8px;
    }
    #screensaver_items #header_right h3 a:hover{
    text-decoration: underline;
    }
    #screensaver_items .content:hover img{
       box-sizing:border-box;
      -moz-box-sizing:border-box;
      -webkit-box-sizing:border-box;
      width:181px;
      height:137px;
      *width:177px !important;
      *height:133px !important;
      border:2px solid #e10000;
     }  

     #screensaver_items .content .caption p{
      text-transform: uppercase;
     }
     #screensaver_items div.no_pad{
    padding-right: 0px !important;
     }
    .caption {
    position: relative;
    margin: 0;
    padding: 0;
    }
    #screensaver_items content .shade{
    display:none;
    }

    #screensaver_items .caption p{
        display: none;
    }
    #screensaver_items .caption span {
        display: none;
    }

    #screensaver_items .content:hover .shade{
        background-color: #333;
        opacity: 0.7;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
            filter: alpha(opacity=70); 
        opacity: 0.7;
        width:  177px;
        *width: 177px !important;
        height:36px;
        position: absolute;
            top: -37px;
        *top: -40px !important;
             left: 2px;
        *left:2px !important;
        display:block;
    }

Answer 1

摆脱这个：

#screensaver_items .content:hover .shade{
background-color: #333;
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70); 
opacity: 0.7;
width:  177px;
*width: 177px !important;
height:36px;
position: absolute;
    top: -37px;
*top: -40px !important;
     left: 2px;
*left:2px !important;
display:block;
}

它应该可以正常工作。

从浮动div中删除额外的边距和填充

1 个答案: