Question

我的代码在Chrome中运行良好，但是当我在Firefox中运行它时，会出现问题。我的网页有2个罗马风格的列（每列包含2个图像，一个顶部和一个底部），从标题的底部垂直延伸到页脚的顶部。但是在Firefox中，它们从页脚顶部停止了约30px，留下了一个空白。我的代码不包含任何供应商前缀，但是当我通过Autoprefixer.com运行我的CSS时，它也没有添加任何内容。这是似乎受影响的代码。

<!--Roman Columns-->
<div class="content"> 

<div id="col_topleft">
  <img src="imagesC/col_topleft.png" alt="column" height="420" width="60">
</div>

<div id="col_topright">
  <img src="imagesC/col_topright.png" alt="column" height="420" width="60">
</div>

<div id="col_bottleft">
<img src="imagesC/col_bottleft.png" alt="column" height="685" width="60">
</div>

<div id="col_bottright">
<img src="imagesC/col_bottright.png" alt="column" height="685" width="60">
</div>


   /*Roman Columns*/
   #col_topleft {position: absolute;
    top: 220px;
    left: 25px;
}       

#col_topright {position: absolute;
    top: 220px;
    right: 25px;
}

#col_bottleft {position: absolute;
    top: 640px;
    left: 25px;
}       

#col_bottright {position: absolute;
    top: 640px;
    right: 25px;
}

Answer 1

这应该可以解决问题。

首先添加一个div位置：相对而不是将内容放在div中

 <div style="position:relative;">
  <div style="position:absolute"> <!-- your content div -->
  </div>
 </div>

浏览器兼容性

1 个答案: