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

     2023-05-07     57

关键词:

【中文标题】我在使用 Mozilla Firefox 和背景图片时遇到问题【英文标题】:I am having issue with Mozilla Firefox and background image 【发布时间】: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,*** 现在有一个 js + css + html 预览供您参考。 请将您的代码上传到 JSFiddle 【参考方案1】:

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

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

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

...你可以开始了!

【讨论】:

Mozilla Firefox 和函数执行问题

】MozillaFirefox和函数执行问题【英文标题】:ProblemwithMozillaFirefoxandfunctionexecution【发布时间】:2011-05-2313:56:50【问题描述】:大家好,我对这段代码有疑问。当我在IExplorer9、Chrome12.0.742.30dev和Opera11.10下尝试代码时-代码可以正常... 查看详情

Mozilla Firefox 中的地理位置:触发成功和错误

】MozillaFirefox中的地理位置:触发成功和错误【英文标题】:GeolocationinMozilaFirefox:Bothsuccessanderrortriggered【发布时间】:2016-06-3014:06:39【问题描述】:如果我在MozillaFirefox中使用地理定位并将超时设置小于ca7秒(更新-FF47.0.1中的ca4... 查看详情

来自 Mozilla Firefox 和 MS Edge 的剪贴板时,Alpha 变为黑色

】来自MozillaFirefox和MSEdge的剪贴板时,Alpha变为黑色【英文标题】:AlphabecomesblackwhencomingfromclipboardonMozillaFirefoxandMSEdge【发布时间】:2017-09-2222:08:25【问题描述】:我正在使用代码fromhere将剪贴板中的图像粘贴到页面上。它适用于... 查看详情

本地 - 在 Mozilla Firefox 中找不到支持格式和 MIME 类型的视频

】本地-在MozillaFirefox中找不到支持格式和MIME类型的视频【英文标题】:Local-NovideowithsupportedformatandMIMEtypefoundinMozilaFirebox【发布时间】:2016-06-1208:46:29【问题描述】:我在本地网页上有一百个视频,都是在引导模式内容中添加的... 查看详情

如何在 Mozilla Firefox 中获取窗口句柄

】如何在MozillaFirefox中获取窗口句柄【英文标题】:HowToGetWindowhandlesInMozillaFirefox【发布时间】:2015-06-1509:28:50【问题描述】:如何在Mozillafirefox中获取所有子窗口的句柄。Spy++只为所有窗口显示一个类和窗口标题。我尝试使用GetWi... 查看详情

不重新启动 Firefox 不会刷新密钥库

...irefox【发布时间】:2012-07-2313:18:06【问题描述】:当我在Mozilla中添加/删除任何证书时,Mozilla的密钥库在手动重新启动之前无法刷新。我创建了一个新的密钥库,用于从Mozilla获取私钥,但它不起作用。它使用了较旧的密钥库,... 查看详情

我在哪里可以获得firefox游标值的cur文件?(代码片段)

...这些可用的地方?答案它们最容易在这里找到:http://mxr.mozilla.org/mozilla-release/source/widget/windows/res/或者在这里:http://hg.mozilla.org/mozilla-central/file/然后单击“widget”->“windows”->“res”,单击所需文件旁边的“文件”,然后单... 查看详情

React-slick 和 Nuka-carousel 在 Mozilla Firefox 中不起作用

】React-slick和Nuka-carousel在MozillaFirefox中不起作用【英文标题】:React-slickandNuka-carouselnotworkinginMozillaFirefox【发布时间】:2017-12-0613:48:49【问题描述】:我在我的项目中导入了React-slick和Nuka-carousel。它在Opera和chrome中运行良好,但在... 查看详情

如何使用 C++ 启动 Mozilla Firefox?

】如何使用C++启动MozillaFirefox?【英文标题】:HowcanIlaunchMozillaFirefoxusingC++?【发布时间】:2014-07-0607:54:02【问题描述】:通过像Code::Blocks这样的编译器编译,我尝试了以下,有点不起作用:/*RunningFirefox.exe*/#include<stdio.h>/*using... 查看详情

Chrome 和 Mozilla Firefox 中的不同打印预览

】Chrome和MozillaFirefox中的不同打印预览【英文标题】:DifferentPrintpreviewinChromeandMozilaFirefox【发布时间】:2015-06-0305:06:05【问题描述】:http://exrx.net/concrete5/extras/food-exchange-journal这是页面链接,页面包含一些表格。当我尝试在Firefox... 查看详情

Mozilla Firefox 在打印时添加间隙

】MozillaFirefox在打印时添加间隙【英文标题】:MozillaFirefoxaddinggapwhileprinting【发布时间】:2018-01-0323:45:44【问题描述】:我尝试使用window.print()进行打印,它在GoogleChrome上运行良好。但是,我不知道为什么在MozillaFirefox上它的左侧... 查看详情

Div 在 Mozilla Firefox 中表现不佳

】Div在MozillaFirefox中表现不佳【英文标题】:DivnotshowingupgoodinMozillafirefox【发布时间】:2017-07-2609:58:12【问题描述】:我正在使用thisplugin来显示书籍,这个结果在IE和Chrome浏览器,但在MozillaFirefox中显示效果不佳!可能是什么原因... 查看详情

使用 mozilla firefox 监听 UDP 端口的方法

】使用mozillafirefox监听UDP端口的方法【英文标题】:WaystolistenaUDPportwithmozillafirefox【发布时间】:2011-09-2014:18:41【问题描述】:简而言之,我正在尝试编写一个C++XPCOM组件,该组件侦听UDP端口并在每次UDP数据包到达时调用回调函数... 查看详情

Mozilla Firefox 中缺少 CC 按钮

】MozillaFirefox中缺少CC按钮【英文标题】:MissingCCbuttoninMozillaFirefox【发布时间】:2014-08-0812:52:49【问题描述】:我正在使用HTML5中的字幕(WebVtt)。视频播放器上应出现一个打开/关闭字幕的按钮。但在Firefox中,这不会发生。这里的... 查看详情

firefox升级后firebug不能使用

...js调试被禁用了,果断去找49.0.2的版本。链接:https://ftp.mozilla.org/pub/firefox/releases/想要知道找到这个版本的方法和其他一些问题解决方案的也可以看看下面的内容。访问火狐浏览器下载的官网:https://www.mozilla.org/en-US/firefox/new/然 查看详情

如何使用 CSS 为 Mozilla Firefox 创建自定义滚动条? [复制]

】如何使用CSS为MozillaFirefox创建自定义滚动条?[复制]【英文标题】:HowcanIcreatecustomscrollbarforMozillaFirefoxwithCSS?[duplicate]【发布时间】:2014-10-1806:54:49【问题描述】:是否可以使用CSS为MozillaFirefox创建自定义滚动条?我发现一些文... 查看详情

Firefox 和 Chrome 中的 getUserMedia() 视频大小不同

...并且在实施约束时(见下文),它们仅适用于Chrome而不是Mozilla。Mozilla中的大小总是显得拉长,最终比chome中的大。varvid_ 查看详情

如何使用 CSS 在 Mozilla Firefox 中启用子输入文本选择?

】如何使用CSS在MozillaFirefox中启用子输入文本选择?【英文标题】:HowcanIenablechildinputstextselectioninMozillaFirefoxusingCSS?【发布时间】:2011-02-1801:34:08【问题描述】:让我们考虑以下场景。我有以下页面,其中所有呈现的元素都必须... 查看详情