浏览器兼容性

我的代码在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; 
}

来源

2017-04-18 Diablo

此代码摘录里面内容没有您所描述的问题。我在Chrome和Firefox中测试过。 https://www.w3schools.com/code/tryit.asp?filename=FEQKCPY79Y1J作为一个侧面说明，我会建议只有一个div左边和右边一个。然后在每个中都有一个顶部和底部。然后在你的CSS中，只为左右div定义一个位置。 –

@ htr5感谢您的帮助，但是我不确定您是如何得出结论的，我的代码没有我描述的问题。我也查看了W3schools中的代码，但代码片段不包含页脚。当我在Firefox中运行所有代码时，我向你保证它有问题，就像我描述的那样。也就是说，这些列在页脚顶部停止了30px。 – Diablo

这将有助于查看包含标题的完整代码。通常这是别的东西造成的问题 –

这应该解决这个问题。

首先添加一个div的位置是：相对比下降该div

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

来源

2017-04-18 01:16:24 Marketingexpert

我重新发布我的问题为“代码只在Chrome中有效”，并且包含我所有的代码，如果你喜欢看一看。不知道我是否做得对，但我尝试了您的解决方案，但无法使其工作。 – Diablo

浏览器兼容性

回答

相关问题