css не работает в Firefox, но во всех других браузерах он работает

ProgramBox

css не работает в Firefox, но во всех других браузерах он работает

Post author:admin
Запись опубликована:1 сентября, 2022
Post category:Вопросы по программированию

#html #css #firefox

#HTML #css #firefox

Вопрос:

У меня небольшая проблема с Firefox (v30). Я создаю сайт, используя jQuery Fullpage scroller, и весь сайт работает в Chrome (v35), IE (11), Opera (v22), но не в firefox. Некоторые стили отображаются, например, шрифт и цвета, но ни одно из изображений или фонов, и даже разделы отображаются неправильно. Не могли бы вы взглянуть на это, пожалуйста, потому что я создал другой сайт с полностраничным скриптом, и он работает в 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;
}

Любая помощь приветствуется, потому что это действительно сводит меня с ума на данном этапе … 🙁
Большое спасибо!

1. Открытие инструментов проверки заставляет его работать, странно. Любопытно увидеть ответ.

2. Изменение размера любого рода работает для меня. Высоты всех разделов содержимого равны 0, пока не произойдет изменение размера. Я предполагаю, что что-то связанное с jQuery вызывается для изменения размера divs при изменении размера страницы.

Ответ №1:

doctype отсутствует, попробуйте добавить <!DOCTYPE html> перед <html> тегом

1. хорошо, теперь вы удалили открывающий тег <html> , хотя 🙂 ваши первые 3 строки кода должны быть <!DOCTYPE html> <html> <head>

2. вау. просто вау. это решило проблему. но не понимаю, почему это может быть проблемой, поскольку <html> должен приниматься таким, какой он есть (как я читал об этом). но с этого момента я буду использовать его именно так. Миллион благодарностей!

3. проверьте это: html-5-tutorial.com/doctype.htm и не забудьте вернуть открывающий тег <html> после doctype 😉

4. понял, спасибо. случайно удалил строку в моем счастье: D

Метки: css не работает в Firefox но во всех других браузерах он работает