我在使用 Mozilla Firefox 和背景图片时遇到问题答案

【问题标题】：I am having issue with Mozilla Firefox and background image我在使用 Mozilla Firefox 和背景图片时遇到问题
【发布时间】：2014-11-14 22:02:39
【问题描述】：

我在一个网站上工作，我在网页上设置了背景图片。我在不同的浏览器上检查了这个页面，它在 Chrome、Chrome Canary 和 IE 9 中运行良好，但在 Fire fox 中运行良好。这是我的 CSS 代码

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) [chrome] (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/ 我不能放两个以上的链接。

【问题讨论】：

也发布您的 html，stackoverflow 现在有一个 js + css + html 预览供您参考。
请将您的代码上传到 JSFiddle

标签： css image firefox background-image

【解决方案1】：

您的问题与您的伪元素container::before的定位有关。

您指定希望 i 相对于其父级绝对定位，这很好。所有浏览器都假定您希望它位于左上角，但 Firefox 不这样做。所以你需要做的就是把它说清楚：

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

...你可以开始了！

【讨论】：