Question

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>

这就是我做过的风格：

/* 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;
}

任何帮助表示感谢，因为这真的让我在这个阶段疯狂...... :( 非常感谢！

Answer 1

缺少doctype，请尝试在<!DOCTYPE html>代码

之前添加<html>

css不能在firefox中运行，但在所有其他浏览器中它都可以

1 个答案: