2014-03-26 34 views
1

我發現頁腳在Chrome上正常顯示,但它看起來像在Firefox上沒有得到overflow:hidden;。包裝div仍然在頁腳的下方多一點。瀏覽器出現差異問題(Firefox) - 包裝的溢出和/或高度

<div class="wrapper6"> // at gallery.html 
<div class="wrapper8"> // at galeri2013.html 

下面是這兩個包裝的div的CSS屬性:

.wrapper6 { 
    margin:0 !important; 
    padding:0 !important; 
    left:0; 
    top:0; 
    position:absolute; 
    background:url(../images/texture.png) repeat; 
    width:100%; 
    height:180% !important; 
    font-family: orator std; 
    overflow:hidden; 
} 
.wrapper8 { 
    margin:0 !important; 
    padding:0 !important; 
    left:0; 
    top:0; 
    position:absolute; 
    background:url(../images/texture.png) repeat; 
    width:100%; 
    height:280% !important; 
    font-family: orator std; 
    overflow:hidden; 
} 

和屬性兩個註腳;

galeri2013.html;

.footy4 { 
    position:relative; 
    display:inline !important; 
    float:left; 
    z-index:1; 
    left:0; 
    margin-bottom:-4.3%; 
    transform:skewX(8deg); 
    -webkit-transform:skewX(8deg); 
    transform:skewY(-2.5deg); 
    -webkit-transform:skewY(-2.5deg); 
    background-color:#e81b1b; 
    width:100%; 
    height:120px; 
    margin-top:96%; 
    overflow:hidden; 
} 

gallery.html;

.footy7 { 
    position:relative; 
    display:inline !important; 
    float:left; 
    z-index:1; 
    left:0; 
    margin-bottom:-4.3%; 
    transform:skewX(8deg); 
    -webkit-transform:skewX(8deg); 
    transform:skewY(-2.5deg); 
    -webkit-transform:skewY(-2.5deg); 
    background-color:#e81b1b; 
    width:100%; 
    height:120px; 
    margin-top:150%; 
    overflow:hidden; 
} 

我覺得我沒有使用最好的方式來處理它,如果你看到任何錯誤/不編碼,請告訴我,這樣我可以學習,也提高了自己的最好方式。

爲了再次澄清,我想讓我的頁腳在Firefox上陷入底部,就像在Chrome上一樣!

+0

在畫廊頁,你可以詳細解釋的問題,你想也正是頁面需要大量的時間來加載,請優化圖像似乎連縮略圖圖像分辨率高,而不是你可以用它修剪版本 –

+0

是的,我知道我在等待獲取新圖像來改變它們。關於這個問題,如果你用chrome和firefox打開這些頁面,你可以看到在firefox中頁腳下面還有一些空間。在鉻中,這一切都沒問題。看起來不知何故firefox沒有得到「溢出:隱藏」。 – Ekin

+0

您可能正在尋找這個http://stackoverflow.com/questions/9126777/keep-footer-with-variable-height-on-bottom即http://jsfiddle.net/dandv/t9mKA/也似乎你需要在上面的解決方案中將腳註放在你的包裝中希望它有幫助 –

回答

1

好吧!幾個小時後,我看到了什麼是錯誤的...我已經把頁腳div放入wrapper div,一切都正常了!

所以這就是我所做的基本上實現它;

<div class="wrapper"> 
    //some other content 
<div class=footer> 
    //footer content 
</div> 
</div> 

,我已經放回overflow:hidden;,而我已經刪除測試什麼是錯的包裝。你可以看到我在這裏用過的其他css屬性。

希望這些對某人有用,並感謝所有幫助過的人。

+0

嘿@Ekin請看看我的答案,因爲如果屏幕不是太高,頁腳不會顯示,那麼在包裝div的高度爲180%或220%時,嘗試在Firefox和Chrome上打開開發人員工具(F12)我會注意到的。 – dippas