Псевдоэлементы исчезают в хроме, но не firefox

В настоящее время я работаю над проектом, для которого требуется верхняя граница элемента и внизу и для его расширения до края страницы. У меня есть оболочка шириной 960px, я установил переполнение-x для скрытия на теле и html. и я использую следующие стили.Псевдоэлементы исчезают в хроме, но не firefox

#profile-page{ 
    position:relative; 
    overflow:hidden; 
} 
#profile-page .bottom:after, #profile-page .bottom:before { 
    content: ""; 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    height: 5px; 
    background-image: -webkit-linear-gradient(0deg, #7ad100 95px, #00bce8 95px, #00bce8 190px, #ffde00 190px, #ffde00 285px, #ff5942 285px, #ff5942 380px); 
    background-image: -ms-linear-gradient(0deg, #7ad100 95px, #00bce8 95px, #00bce8 190px, #ffde00 190px, #ffde00 285px, #ff5942 285px, #ff5942 380px); 
    background-image: -moz-linear-gradient(0deg, #7ad100 95px, #00bce8 95px, #00bce8 190px, #ffde00 190px, #ffde00 285px, #ff5942 285px, #ff5942 380px); 
    background-size: 380px; 
} 

#profile-page .bottom:before{ 
    top: -2px; 
} 
#profile-page .bottom:after{ 
    bottom: -2px; 
} 
#profile-page .bottom{ 
    padding-left:3000px; 
    margin-left:-3000px; 
    padding-right:3000px; 
    margin-right:-3000px; 
    position:relative; 
    background: #ffffff; 
}

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

Если я удаляю стилизацию, чтобы сделать растяжку на краю экрана, стиль отображается в хромированном состоянии. Я не могу понять, какая часть этого стиля путается с моими псевдоэлементами, но надеется, что кто-то здесь узнает. Заранее спасибо.

EDIT: Я просто хотел очистить это, если я удалю следующие правила, которые я установил REMOVE рядом с psuedos. Но тогда мой ДИВ больше не доходит до края экрана и содержится в обертку, которая не может произойти

#profile-page .bottom{ 
    padding-left:3000px; -REMOVE 
    margin-left:-3000px; -REMOVE 
    padding-right:3000px; -REMOVE 
    margin-right:-3000px; -REMOVE 
    position:relative; 
    background: #ffffff; 
}

CSS является своего рода написана менее, Пытался взять любые Less ярлыки, но может пропустили некоторые просто люди, которые думают, что они видят что-то не так.

EDIT: В соответствии с просьбой, HTML Структура

<html> 
<body id="profile-page"> 
    <div id="wrapper"> 
    <div class="top"></div> 
    <div class="item bottom"> 
     <div id="profile-content">PROFILE LINKS</div> 
    </div> 
    </div> 
</body> 
</html>

Firefox

Chrome

Top является светлячок, снизу хром

источник

2013-12-04 OneEightLeft

Это может помочь: http://stackoverflow.com/questions/10871333/using-before-and-after-pseudo-elements-on-background-image –

Если это не работает, опубликовать некоторые ваша структура HTML, чтобы мы могли видеть, с чем вы работаете. –

@Diodeus Я думаю, что правильно их использую исходя из этой темы. – OneEightLeft

Из моих тестов: ограничивает Chromeразмер псевдо-элементы :before и :after на 1900px (по крайней мере, в данном случае): http://jsfiddle.net/xLF8r/4/

В вашем случае, вы установите отступы/поля на .bottom до 2900px/-2900px так градиент будет виден на край тела. Если вы измените это на 950px/-950px, они появятся. Если вы установите ширину псевдоэлементов в 1900px, они появятся. Если вы установили right: -280%, они отображаются (он вычисляет в этом случае значение -1900px).

Если вы посмотрите на эту скрипту в Firefox, элементы отображаются независимо от того, для чего вы установили эти размеры.

Другой тест: Изменение фона допустимого размера элемента, чтобы получить больше и оставаться видимым: http://jsfiddle.net/xLF8r/6/

Так что, если вы увеличиваете свой фон-размер и изменить градиент, чтобы заставить его выглядеть у вас есть его добавив больше цветовых остановок, он должен работать.

Из этих тестов видно, что хром ограничивает размер псевдоэлемента только в 5 раз большим, чем размер фона. 1900px/380px = 5 в первом тесте; 1901px заставляет элемент исчезать. 6900px/1380px = 5 во втором тесте; 6901px заставляет элемент исчезать.

Edit для другого теста и для дальнейшего использования мне было интересно, поэтому я создал Codepen глядя на некоторых примерах. Здесь я могу увеличить размер фона до 10 раз. Включение одного и того же кода в jsfiddle также показывает, что работает 10 раз. Таким образом, в вашем коде есть что-то, что уменьшает его до 5 раз.

Я reduced your code повторить такое же поведение, и я до сих пор только получать в 5 раз больше, вместо 10. Я проковылял, почему это так.

источник

2013-12-04 19:51:02 brouxhaha

Вау, удивительный ответ. – OneEightLeft

Я проверил еще несколько тестов и выяснил, что размер фона в 10 раз - это то, что позволяет Chrome - я все еще не мог получить ваш код более 5 раз. – brouxhaha

just remove the line // position:relative; 
from the lines 
#profile-page .bottom{ 
    padding-left:3000px; 
    margin-left:-3000px; 
    padding-right:3000px; 
    margin-right:-3000px; 
    position:relative; 
    background: #ffffff; 
} 

I am sure it will work.

источник

2013-12-04 20:23:50

Псевдоэлементы исчезают в хроме, но не firefox

ответ

Смежные вопросы