為什么常規樣式會覆蓋文本陰影的移動樣式

Question

我有以下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並隱藏在默認樣式中並以移動方式顯示？

Answer 1

使用/* */實際上並沒有在瀏覽器端將其設置為空，它只是將其視為CSS的注釋行並使用其他地方實際設置的內容。

將注釋掉的行更改為此

text-shadow: none;