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中，margin-top略高，在IE中它甚至高于FF和Chrome。知道如何解决这个问题吗？

Answer 1

而不是

display:block;
float:left;

尝试用

替换两行

display: inline-block;

Answer 2

你需要在一个div中包含aside元素，然后给一个浮点数：左;并从positoin:absolute中移除margin:left和#slider，并使用与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*/

让我的margin-top与浏览器兼容/有问题/

2 个答案: