2013-06-21 5 views
0

Моя проблема связана с IE и тем, как она отображает мой обрезанный текст.IE не отображает текст CSS правильно - background-clip

Обычно (хром/далее/и т.д.) мой код делает это:

http://i.stack.imgur.com/x9lio.png

Однако в IE он делает так:

http://puu.sh/3kJOx.png

Мой код выглядит следующим образом:

HTML:

<div id="centerArt"> 
     Hi, Visitor! 
    </div> 

CSS:

#centerArt{ 
font-family:"Arial", Arial, sans-serif; 
font-weight: bold; 
font-size: 100px; 
line-height: 150px; 
background-color: #565656; 
color: transparent; 
text-shadow: 0px 2px 3px rgba(255,255,255,0.3); 
-webkit-background-clip: text; 
-moz-background-clip: text; 
     background-clip: text;} 

Есть ли способ заставить IE себя вести? :)

Спасибо!

+2

Как мы все хотим! – rikitikitik

+0

В каких версиях IE вы пытаетесь это сделать? Пожалуйста, будьте более конкретными. Я точно знаю, что IE6-9 не поддерживает эту функцию. IE9 поддерживает только фоновый клип: border-box | прокладка | Содержание ящика. http://msdn.microsoft.com/en-us/library/ie/jj127314(v=vs.85).aspx –

ответ

-1

IE не поддерживает color: transparent Определенное значение. Попробуйте использовать

font-size: 0; или добавить IE взломать background:none\9;

+0

Кажется, вы правы в этой переменной, есть ли какие-либо другие изменения? – user2508363

+0

Конечно, IE поддерживает «color: transparent», но то, что он не поддерживает, - «background-clip» - и поэтому текст вообще не отображается. – CBroe

+0

Невозможно отобразить текст, который выглядит так в IE? – user2508363

0

background-clip: text не поддерживаются в IE, значения действительно свойство только border-box, padding-box и content-box: https://msdn.microsoft.com/en-us/library/jj127314(v=vs.85).aspx

Вы можете попробовать использовать @supports (-webkit-background-clip: text) с запасным вариантом для других браузеров ,

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