Почему обычный стиль переопределяет мобильный стиль для тени текста

Question

Почему обычный стиль переопределяет мобильный стиль для тени текста

0

У меня есть следующий 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 и скрыть стиль и отображение по умолчанию в мобильном стиле?

SearchForKnowledge 04 март 2014, в 16:23

Источник

1

Хм ... это закомментировано в мобильной таблице стилей. Если вы хотите отключить стиль, вы должны использовать text-shadow:none
Niet the Dark Absol 04 март 2014, в 14:33
0

ЛЕГКО и просто, и это сработало. Спасибо
SearchForKnowledge 06 март 2014, в 14:27

Теги:

html

css

css3

1 ответ

Ещё вопросы

Хм ... это закомментировано в мобильной таблице стилей. Если вы хотите отключить стиль, вы должны использовать text-shadow:none
ЛЕГКО и просто, и это сработало. Спасибо

Stewartside · Accepted Answer · 2014-03-04T12-52-00.000Z

Использование /* */ самом деле не устанавливает его на стороне браузера, оно просто рассматривает его как прокомментированную строку в CSS и использует то, что было фактически установлено в другом месте.

Измените прокомментированную строку на эту

text-shadow: none;

Спасибо. Это сработало, и я даже не думал об этом. :) UPVOTE и ПРИНЯТЬ