我遇到Mozilla Firefox和背景圖片問題

我在網站上工作，我在網頁上設置背景圖片。我在不同的瀏覽器上查看了這個頁面，並且在Chrome，Chrome Canary和IE 9中運行良好，但沒有使用Fire Fox。這裏是我的CSS代碼我遇到Mozilla Firefox和背景圖片問題

container{ 
    height:80vh; 
    width:100%; 
    display: inline-block;  
    color:white; 
    z-index: 1; 
    position: relative; 
} 

container::before { 
    height:80vh; 
    width:100%; 
    content : ""; 
    position: absolute; 
    z-index: -1; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-image: url('/imgs/backG.jpg'); 

} 

material{ 
    margin: 0 auto; 
    width:90%; 
} 

infobox{ 
    width:48%; 
    height:70%; 
    float:right; 
    line-height:1.5em; 
    padding:10px; 
    margin:10px;  
} 

titlenote{ 
    font-family: 'Ubuntu', sans-serif; 
    font-size:1.875em; 
    color:#e74c3c; 
    font-weight:bold; 
    display:block; 
} 

description{ 
    font-size:1.2em; 
    display:block; 
    font-weight:bold; 
    margin-top:15px; 
    font-family: Armata; 
    line-height:1.5em; 
    color:white; 
} 
signup{ 
    text-align:center; 
    width:45%; 
    height:70%; 
    float:left; 
    line-height:1.5em; 
    padding:10px; 
    margin:10px; 
}

，這裏是從Firefox和Chrome瀏覽器，我的圖片， 1）[火狐]（http://postimg.org/image/k6b50g2pv/）圖像 2）鉻（http://postimg.org/image/ic7ha6ugz/）圖像

它也亂七八糟的字體大小和所有。我正在學習CSS和一切，所以我不知道如何解決這個問題。我嘗試了很多谷歌解決方案，但無法找到它。如果有人願意，請幫助我。

<container> 
    <material> 
     <signup><h1>Join today </h1> 
     <form id="signup" autocomplete="off"> 
      "all input tags are here" 
     </form> 
    </signup> 
    <infobox> 
     <titlenote>Welcome to website</titlenote> 
      <description>Lorem ispun stuff</description> 
     </infobox> 
    </material> 
</container>

這裏是演示的jsfiddle鏈接。 jsfiddle/pccnfv4f /和我不能把更多的兩個鏈接，所以。

來源

2014-09-20 JavaLearner

也發佈你的html，stackoverflow現在有一個js + css + html預覽fyi。 – simonzack 2014-09-20 12:17:26

請將您的代碼上傳到JSFiddle – Khalsa 2014-09-20 12:46:18

你的問題是關於你的僞元素的定位container::before。

您指定您希望我完全與其父母相關，這很好。所有的瀏覽器都假設你希望它位於左上角，但Firefox不。所以你需要做的就是做到這一點：

container:before { 
    top: 0; <- Add these 
    left: 0; <- two lines 
    height:80vh; 
    ...

...你很好走！

來源

2014-09-20 22:11:17

我遇到Mozilla Firefox和背景圖片問題

回答

相關問題