У меня есть следующий HTML DIV:
<div class="sliderCaptionHeader">Be Smart. Eat Smart.</div>
Следующий вызов таблицы стилей CSS:
<!-- default stylesheets -->
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle.css">
<link rel="stylesheet" type="text/css" href="theStyles/captionStyle.css">
<!-- mobile stylesheets
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle_mobile.css" media='only screen and (max-device-width: 480px) and (min-device-width : 320px)'>
<link rel="stylesheet" type="text/css" href="theStyles/captionStyle_mobile.css" media='only screen and (max-device-width: 480px) and (min-device-width : 320px)'>-->
<link rel="stylesheet" media="screen and (max-width: 480px)" href="theStyles/defaultStyle_mobile.css" />
<link rel="stylesheet" media="screen and (max-width: 480px)" href="theStyles/captionStyle_mobile.css" />
<!-- if ie version 9 or less -->
<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle_ie.css">
<link rel="stylesheet" type="text/css" href="theStyles/captionStyle_ie.css">
<![endif]-->
Это стиль captionStyle.css
:
.sliderCaptionHeader {
font-family: 'kronikaregular';
position: absolute;
width: 100%;
height: 50px;
bottom: 55px;
padding: 5px;
text-align: center;
line-height: 50px;
text-transform: uppercase;
font-size: 60px;
color: #BD2316;
text-shadow: -1px 0 #ccc, 0 1px #ccc, 1px 0 #ccc, 0 -1px #ccc;
}
Это стиль для captionStyle_mobile.css
:
.sliderCaptionHeader {
font-family: 'kronikaregular';
position: absolute;
width: 100%;
height: 50px;
bottom: 75px;
padding: 5px;
text-align: center;
line-height: 50px;
text-transform: uppercase;
font-size: 70px;
color: #BD2316;
/*text-shadow: -1px 0 #ccc, 0 1px #ccc, 1px 0 #ccc, 0 -1px #ccc;*/
}
Когда я запускаю его в эмуляторе мобильного браузера (http://www.responsinator.com/) и проверяю элемент, мне представляется следующее:
Как вы видите, text-shadow
используется из стиля по умолчанию и не переопределяется мобильным стилем.
Почему это происходит, и есть ли способ исправить это? Или мне нужно создать полный новый DIV и скрыть стиль и отображение по умолчанию в мобильном стиле?
Использование /* */
самом деле не устанавливает его на стороне браузера, оно просто рассматривает его как прокомментированную строку в CSS
и использует то, что было фактически установлено в другом месте.
Измените прокомментированную строку на эту
text-shadow: none;
text-shadow:none