css 在 firefox 中不起作用，但在所有其他浏览器中都可以-前端黑洞网

本站消息

站长简介/公众号

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

黑洞官方问答小能手

487683

文章

249221194

访问

+关注

分类

暂无分类

日期归档

暂无数据

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

发布于2022-05-08 21:45 阅读(1295) 评论(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;
}