2015-02-20 3 views
2

Следующий CSS работает в Chrome, но не в Firefox. Он добавляет padding в свернутом текст с background-color:box-shadow CSS не выполняется в Firefox

HTML:

<span id="titleheader">EVERYONE ACHES TO MAKE A DIFFERENCE</span> 

CSS:

#titleheader { 
    background: none repeat scroll 0 0 rgba(255, 0, 0, 0.38); 
    line-height: 140% !important; 
    padding-left: 0px; 
    padding-right: 0px; 
    box-shadow: 10px 0 0 rgba(255, 0, 0, 0.38), -10px 0 0 rgba(255, 0, 0, 0.38) !important; 
} 

Но Firefox не выполняет эту часть:

box-shadow: 10px 0 0 rgba(255, 0, 0, 0.38), -10px 0 0 rgba(255, 0, 0, 0.38) !important;

@-moz-document url-prefix() { 
    #titleheader { 
     background: none repeat scroll 0 0 rgba(255, 0, 0, 0.38); 
     line-height: 140% !important; 
     padding-left: 0px; 
     padding-right: 0px; 
     box-shadow: 10px 0 0 rgba(255, 0, 0, 0.38), -10px 0 0 rgba(255, 0, 0, 0.38) !important; 
    } 
} 

Мой сайт: http://dev.presencingtheactivefeminine.com/

+1

Я не вижу разницы в загрузке вашего сайта в последнюю версию Firefox или Chrome. Можете ли вы добавить подробности или JSFiddle, чтобы продемонстрировать точную проблему? (Где находится этот код? – TylerH

+0

Он отображается ** точно **, как будто он установлен. Он показывает красную рамку с обеих сторон '# titleHeader'. Если вы хотите увидеть ее лучше, ** измените ее цвет так что он точно не совпадает с фоном **, например 'box-shadow: 10px 0 0 rgba (255, 255, 0, 0.38), -10px 0 0 rgba (255, 255, 0, 0.38)! important; 'Так как цвет точно такой же, как и у фона, вы его не видите. – Ted

+0

Нет, это не так, если вы измените размер окна так, чтобы заголовок заголовка должен быть« слева и справа »на деформированном цвет фона, он есть в 'all' браузерах', но' FF – xyz

ответ

0

Это зафиксировал его в FireFox

Вам не нужно, как указано на @TylerH

-moz-box-shadow: 10px 0 0 rgba(255, 0, 0, 0.38), -10px 0 0 rgba(255, 0, 0, 0.38) !important;

но вам нужно добавить

box-decoration-break: clone;

#titleheader { 
    background: none repeat scroll 0 0 rgba(255, 0, 0, 0.38); 
    box-decoration-break: clone; 
    -webkit-box-shadow: 10px 0 0 rgba(255, 0, 0, 0.38), -10px 0 0 rgba(255, 0, 0, 0.38) !important; 
    box-shadow: 10px 0 0 rgba(255, 0, 0, 0.38), -10px 0 0 rgba(255, 0, 0, 0.38) !important; 
} 
Смежные вопросы