html - 在让我的 margin-top 与跨浏览器兼容时遇到问题/

Question

所以对于我的 HTML

<section id="slider">
    <div class="rslides_container">
  <ul class="rslides" id="slider1">
    <li><img src="images/IMG_5858.jpg" alt="The Process"></li>
    <li><img src="images/IMG_5642.jpg" alt="Pieces of a Quilt"></li>
    <li><img src="images/IMG_5764.jpg" alt="Here's Looking at You"></li>
    <li><img src="images/IMG_5847.jpg" alt="Which Way Do I Go"></li>
    <li><img src="images/IMG_5851.jpg" alt="Which Way Do I Go"></li>        
    <li><img src="images/IMG_5659.jpg" alt="Which Way Do I Go"></li>                
    <li><img src="images/IMG_5664.jpg" alt="Which Way Do I Go"></li>                        
  </ul>
</div>

</section>

还有我的CSS

#slider
{
    width:585px;
    background-color:#e0e0e0;   
    padding:11px;
    display:block;
    float:left;
    margin-left:27px;
    margin-top:-621px;
}

知道为什么在 Chrome 中它看起来不错，但在 FF 中边距顶部略高，在 IE 中它甚至比 FF 和 Chrome 高。知道如何解决这个问题吗？

Answer 1

你需要将 aside 元素包装在一个 div 中，然后给出一个 float:left;并从 #slider 中删除 positoin:absolute 和 margin:left 并使用与 aside 相同的边距属性元素。

检查 DEMO .

#slider
{
background-color:#e0e0e0;   
float:left;
margin:25px 0 0 40px;
padding:0 12px;
width:30%;
/*margin-left:370px;
margin-top:80px;
position:absolute;*/
}

.wrap{float:left;}/*contain all aside element*/