本站消息

站长简介/公众号


站长简介:高级工程师,爱好交友,无偿辅导python和前端,技术交流,面试指导,找工作指导,瞎聊都可加我微信i88811i哈,欢迎欢迎!也欢迎加入程序员交流群,专属程序员的圈子,加我微信拉你进群.欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

css 在 firefox 中不起作用,但在所有其他浏览器中都可以

发布于2022-05-08 21:45     阅读(1069)     评论(0)     点赞(11)     收藏(4)


我对 Firefox(v30) 有点问题。我正在制作一个网站,使用 jQuery Fullpage 滚动器,整个网站在 Chrome(v35)、IE(11)、Opera(v22) 中工作,但在 firefox 中没有。出现了一些样式,如字体和颜色,但没有图像或背景,甚至部分都无法正确显示。请您看一下,因为我已经使用 Fullpage 脚本创建了另一个站点,并且它在 firefox 下运行,而且我在任何地方都使用了相同的方法,现在它只是不想工作。地址是:http ://sikitomi.hopto.org/bts

这是我的索引文件:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="description" content="">
    <meta name="keywords" lang="en" content="">
    <meta name="robots" content="INDEX,FOLLOW">

    <title>Body Training Solutions</title>

    <link rel="stylesheet" href="./css/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="./css/jquery.fullPage.css" type="text/css" media="screen" />

    <!-- <link href="favicon.ico" rel="icon" type="image/x-icon" /> -->

    <script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="./js/jquery.easings.min.js"></script>
    <script type="text/javascript" src="./js/jquery.slimscroll.min.js"></script>
    <script type="text/javascript" src="./js/jquery.fullPage.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#fullpage').fullpage({
                loopTop: true,
                loopBottom: true
            });
        });
    </script>
</head>

<body>

<div id="fullpage">
    <div class="section" id="section0">
        <div class="left">
            <p><img src="./img/logo.png" alt=""/></p>
            <p>FULL SITE</p>
            <p>COMING SOON</p>
        </div>
        <div class="arrow">
            <img src="./img/arrow.png" alt=""/>
        </div>
    </div>
    <div class="section" id="section1">
        <h1>UPCOMING EDUCATION COURSES</h1>
        <div class="arrow">
            <img src="./img/arrow.png" alt=""/>
        </div>
    </div>
    <div class="section" id="section2">
        <div class="bg"></div>
        <h1>OUR CLASSES</h1>
        <div class="arrow">
            <img src="./img/arrow.png" alt=""/>
        </div>
        <ul>
            <li class="trx"><img src="./img/trx.png" alt="TRX"/></li>
            <li class="trx"><img src="./img/trigger.png" alt="TriggerPoint"/></li>
            <li class="trx"><img src="./img/ankorr.png" alt="Ankorr"/></li>
        </ul>
    </div>
    <div class="section" id="section3">
    </div>
</div>

</body>
</html>

这是我制作的 style.css:

/* Font */

@font-face 
{
    font-family: 'canterbold';
    src: url('canter_bold-webfont.eot');
    src: url('canter_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('canter_bold-webfont.woff') format('woff'),
         url('canter_bold-webfont.ttf') format('truetype'),
         url('canter_bold-webfont.svg#canterbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Defaults */

html, body, p, h1, h2, h3, h4, h5, h6, div, ul
{
    padding: 0;
    margin: 0;
    font-weight: normal;
    list-style: none;
}

img
{
    border: 0;
    width: auto;
    height: 100%;
}

p img
{
    width: auto;
    height: auto;
}
/* Customisations */

body
{
    background: #fff;
    font-family: 'canterbold';
    color: #fff;
}

#section0
{
    display: inline-block;
    background: url('../img/slide01bg.jpg') no-repeat center center;
    background-size: cover;
}

#section0 .left
{
    position: absolute;
    top: 5%;
    left: 0px;
    width: 36%;
    height: 95%;
    text-align: center;
    font-size: 10vh;
    font-size: 600%;
}

#section0 p
{
    padding: 2% 0px;
}

#section0 .arrow
{
    position: absolute;
    right: 0px;
    bottom: 2%;
    left: 0px;
    width: 36%;
    height: 12%;
    text-align: center;
}

#section1
{
    background: url('../img/slide02bg.jpg') no-repeat center top;
    background-size: cover;
}

#section1 h1
{
    position: absolute;
    top: 4%;
    left: 2%;
    display: inline;
    text-align: left;
    font-size: 8vh;
    font-size: 480%;
}

#section1 .arrow
{
    position: absolute;
    right: 0px;
    bottom: 2%;
    left: 0px;
    height: 12%;
    text-align: center;
}

#section2
{
    background: url('../img/slide03bg.jpg') center bottom;
    background-size: cover;
    text-align: center;
}

#section2 h1
{
    position: absolute;
    top: 1%;
    left: 5%;
    display: inline;
    text-align: left;
    font-size: 8vh;
    font-size: 480%;
    color: #3c3c3c;
    z-index: 10;
}

#section2 .bg
{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 70%;
    background: url('../img/slide03middle.png') no-repeat center center;
    background-size: contain;
    z-index: 0;
    text-align: center;
}

#section2 .arrow
{
    position: absolute;
    right: 0px;
    bottom: 2%;
    left: 0px;
    height: 12%;
    z-index: 10;
    text-align: center;
}

#section2 ul
{
    display: block;
    position: absolute;
    right: 0px;
    bottom: 0px;
    left: 0px;
    height: 37%;
}

#section2 li
{
    width: 33%;
    height: 35%;
    display: inline-block;
    font-size: 0;
}

#section3
{
    background: url('../img/slide04bg.jpg') center bottom;
    background-size: cover;
}

任何帮助表示赞赏,因为在这个阶段这真的让我发疯...... :(非常感谢!


解决方案


缺少doctype,请尝试在标签<!DOCTYPE html>前添加<html>


站长简介:高级工程师,爱好交友,无偿辅导python和前端,技术交流,面试指导,找工作指导,瞎聊都可加我微信i88811i哈,欢迎欢迎!也欢迎加入程序员交流群,专属程序员的圈子,加我微信拉你进群
欢迎关注我的公众号:程序员总部,关注公众号回复前端,免费领取 全套前端视频教程,关注公众号回复前端充值+你的账号,免费为您充值1000积分



所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/356398/4b19360c5f5ed9c3351a/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

11 0
收藏该文
已收藏

评论内容:(最多支持255个字符)