Html 在使我的页边空白顶部与跨浏览器兼容方面遇到问题/

所以对于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>

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

而不是

display:block;
float:left;

尝试将这两行替换为

display: inline-block;

---

您需要在div中将

元素包装到一旁，然后给出一个float:left；从
#滑块
中删除
positionin:absolute
和
margin:left
，并使用与
aside
元素相同的边距属性

检查

#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*/

你能给我们写一张我们可以看的照片吗？还可以将所有图像更改为通用源，以便我们可以看到它们。@Geroy290请注意，我没有包括JS，但您可以看到右侧带有项目符号列表的灰色框没有显示为与左侧顶部灰色框对齐。这需要在IE、FF、Chrome、Safari等中呈现相同的内容。我刚刚用更多的内容更新了代码。在不同浏览器中正确呈现字体也有问题。我已经将@font-face设置为它应该是什么，但它似乎没有拾取更改的字体类型。只有将这些字体文件加载到FTP时，这才有效吗？虽然有效，但Google chrome与FF和IEFF相比仍有几个像素高。这个答案对你有帮助吗？我这样做了，事实上让情况变得更糟。是的，除非我做错了什么，否则它不起作用。它将“滑块”移动到与侧边框对齐的位置，并将其移动到较低的位置。我还刚刚用JSFIDDLOK中的附加内容更新了代码。我错过了在div中包装asides的部分。现在可以了，谢谢。在不同浏览器中正确呈现字体也有问题。我已经将@font-face设置为它应该是什么，但它似乎没有拾取更改的字体类型。仅当这些字体文件加载到FTP时，此操作才有效吗？这段代码也有问题吗？对于字体，你也应该使用woff格式。是的，您必须在服务器上上传自定义字体，然后在css文件中定义字体时使用字体路径
#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*/