瀏覽器兼容性

我的代碼在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

瀏覽器兼容性

回答

相關問題