Абсолютное позиционирование зависит от браузера при использовании псевдоэлементов

Я изменяю ссылку для загрузки, чтобы над ней отображались две иконки (используя псевдоэлементы и шрифт значков). Эти значки должны быть наслоены.

Для этого я присваиваю ссылке position: relative, а второй значок (который я размещаю поверх первого) получает position: absolute. Затем я просто отрегулировал значения top и left так, чтобы они оказались там, где я хотел.

jsFiddle

@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');

body {
    /* just to make sure everything fits on screen */
    padding: 100px;
    text-align: center;
}

.download {
    position: relative;
    color: #000;
    text-decoration: none;
}

.download::before {
    display: block;
    content:'\f1c1';
    font-family:'FontAwesome';
    font-size: 42pt;
    margin-bottom: 10px;
}
.download::after {
    position: absolute;
    display: block;
    content:'\f019';
    font-family:'FontAwesome';
    font-size: 28pt;
    top: -40px;
    left: 50%;
    margin-left: 5px;
}
<a href="#" class="download">Download PDF</a>

В Хроме работает отлично. Значок «скачать» находится прямо над значком «документ» в правом нижнем углу. Однако в Firefox значок «скачать» находится над значком «документ». Я подозреваю, что это результат того, что псевдоэлемент технически не является дочерним элементом DOM элемента a.download, хотя этот пример (который не использует псевдоэлементы) имеет ту же проблему с позиционированием.

Чем отличаются реализации position: absolute в браузерах в сочетании с псевдоэлементами и как мне обойти это?


html css css-position pseudo-element
person Woodrow Barlow    schedule 08.07.2015    source источник
comment
хотя этот пример, в котором не используются псевдоэлементы, по-прежнему имеет ту же проблему с позиционированием.   -  person Woodrow Barlow    schedule 08.07.2015
comment
Для меня Chrome здесь выглядит сломанным, но почему у меня сейчас нет особых идей, но я также с нетерпением жду ответов   -  person Dan Gamble    schedule 09.07.2015

Ответы (2)


arrow_upward
2
arrow_downward

Я думаю, что понял.

Тег <a> сворачивается в Chrome, но в Firefox он получает рамку. Кажется, лучше всего было бы дать тегу <a> немного padding-top, чтобы сдвинуть текст вниз, а также полностью расположить значок акробата. Я не совсем уверен, как сделать так, чтобы он не рушился в Chrome.

Пример: http://jsfiddle.net/5jn9yw7s/

@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');

body {
    padding: 100px;
    text-align: center;
}

.download {
    position: relative;
    color: #000;
    text-decoration: none;
}

.download::before {
    position: absolute;
    display: block;
    content:'\f1c1';
    font-family:'FontAwesome';
    font-size: 42pt;
    top: -52pt;
    left: 50%;
    margin-left: -21pt;
}

.download::after {
    position: absolute;
    display: block;
    content:'\f019';
    font-family:'FontAwesome';
    font-size: 28pt;
    top: -32pt;
    left: 50%;
}
<a href="#" class="download">Download PDF</a>

person Dan Gamble    schedule 09.07.2015
comment
ты был прав! позиционирование значка документа с абсолютным позиционированием также сработало. возможно, вы хотели бы обновить свой ответ с помощью этого рабочего кода? - person Woodrow Barlow; 09.07.2015
comment
Конечно! Я только что поиграл в строке, вероятно, мне следует привыкнуть к редактированию скрипок. - person Dan Gamble; 09.07.2015

arrow_upward
0
arrow_downward

В firefox абсолютное позиционирование псевдоэлементов игнорируется и рассматривается как два относительных элемента. Вы можете установить специальное исправление Firefox для этого, добавив это в свой css:

@-moz-document url-prefix() {
    .download::after {
        top: 0;
        left: 0;
        margin-left: 5px;
        margin-top:58px
   }
}

Рабочая скрипта

Играйте с полями для лучшего результата.

person Janaka Dombawela    schedule 09.07.2015
comment
спасибо, но я бы предпочел найти одно решение, которое стабильно работает во всех/большинстве браузеров, а не исправление, предназначенное для одного браузера, но все же может привести к поломке других непроверенных браузеров. - person Woodrow Barlow; 09.07.2015