свойство контента не работает в Firefox, но в chrome работает? - PullRequest
Новая
       11

свойство контента не работает в Firefox, но в chrome работает?

0 голосов
/ 09 октября 2018

Так что я работаю над тем, чтобы сделать мою страницу более отзывчивой, и она так же, как я хочу ее в Chrome, однако я попытался открыть ее с помощью Firefox, и она просто не показывает изображения.Я попытался изменить свойство содержимого на фон, но это тоже не сработало.Что вызывает такое поведение на странице?А также, как мне заставить его работать для Firefox? 

html{
    background: #212121;
}
.wrapper {
    margin-top: 15%;
    display: flex;
    justify-content: center; /*center the element*/
    flex-wrap: wrap; /*make them above each other when they cannot fit in one row*/
  }
  
  .divWrapper {
    background-image: url("/images/gear.png");
    height: 600px;
    width: 250px;
    margin: 5%;
  }

  .headSlot{
      content: url("https://vignette.wikia.nocookie.net/2007scape/images/3/35/Head_slot.png/revision/latest?cb=20130227123039");
      width: 45px;
      height: 45px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 25%;
  }

  .neckSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/b/b4/Neck_slot.png/revision/latest?cb=20130227122801");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.arrowSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/6/64/Ammo_slot.png/revision/latest?cb=20130227122436");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.capeSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/b/ba/Cape_slot.png/revision/latest?cb=20130227182819");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.chestSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/3/33/Torso_slot.png/revision/latest?cb=20130227120231");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.swordSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/d/d1/Weapon_slot.png/revision/latest?cb=20130227121007");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.shieldSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/d/d9/Shield_slot.png/revision/latest?cb=20130227123309");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.legSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/2/25/Legs_slot.png/revision/latest?cb=20130227123853");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.feetSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/b/b0/Boots_slot.png/revision/latest?cb=20130227123356");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.gloveSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/6/69/Gloves_slot.png/revision/latest?cb=20130227123502");
    width: 45px;
    height: 45px;
}

.ringSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/9/9f/Ring_slot.png/revision/latest?cb=20130227123624");
    width: 45px;
    height: 45px;
}


.topItems{
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
    display: flex;
    flex-direction: row;
    justify-content: center; 
}

.middleItems{
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
    display: flex;
    flex-direction: row;
    justify-content: center; 
}

.bottomItems{
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
    display: flex;
    flex-direction: row;
    justify-content: center; 
}


@media only screen and (max-width: 180px){
    .topItems{
        width: 45px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }

    .middleItems{
        width: 45px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;

    }

    .bottomItems{
        width: 45px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;

    }
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Learning</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />

</head>

<body>
    <div class="wrapper">
        <div class="divWrapper">
            <a href="#">
                <section class="headSlot">
                </section>
            </a>


            <div class="topItems">
                <a href="#">
                    <section class="capeSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="neckSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="arrowSlot">
                    </section>
                </a>
            </div>

            <div class="middleItems">
                <a href="#">
                    <section class="swordSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="chestSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="shieldSlot">
                    </section>
                </a>

            </div>


            <a href="#">
                <section class="legSlot">
                </section>
            </a>

            <div class="bottomItems">
                <a href="#">
                    <section class="gloveSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="feetSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="ringSlot">
                    </section>
                </a>
            </div>
        </div>

        <div class="divWrapper">

        </div>
    </div>
    <script src="js/main.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</body>

</html>

1 Ответ

0 голосов
/ 09 октября 2018

Согласно MDN, content предназначено для использования на псевдоэлементах только (::before и ::after):

Относится к ::before и::after псевдоэлементы

https://developer.mozilla.org/en-US/docs/Web/CSS/content

Редактировать: Интересно, что текущий рабочий проект (редакция редакции, 26 сентября 2018 г.) спецификации содержитчто-то другое:

Применяется ко всем элементам, древовидным псевдоэлементам и полям страницы

https://drafts.csswg.org/css-content-3/#content-property

2nd Edit: Эта функция настолько нова, что даже caniuse не имеет ничего на ней:

CSS Сгенерированный контент для псевдоэлементов

https://caniuse.com/#feat=css-gencontent

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...