результат совершенно другой, используя Chrome и Firefox 10,2

Question

Я создаю этот текстовый эффект:

.inset-text
{
    background-color: #666666;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255,255,255,0.5) 0 3px 3px;          
}

<p class="inset-text">Some Text</p>

К сожалению, если вы попытаетесь запустить этот пример с помощью Firefox, вы увидите серый прямоугольник, а в Chrome все работает хорошо. Как я могу решить эту проблему?

Answer 1

background-clip: text;  

В настоящее время поддерживается только в браузерах на основе webkit (Chrome и Safari).Он нестандартный, поэтому трудно сказать, будет ли когда-либо поддерживаться текстовый атрибут в других браузерах (Firefox, Opera и Internet Explorer)Какой эффект вы пытаетесь достичь?Я, вероятно, могу дать вам хорошую альтернативу, не используя ее.

Answer 2

Вы уверены, что background-clip может принимать значение text? В w3schools или в Mozilla Developer Network я не вижу этого в списке. Кстати, Firefox теперь принимает только background-clip.