为什么常规样式会覆盖文本阴影的移动样式

时间:2014-03-04 14:29:04

标签: html css css3

我有以下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/)中运行它并检查元素时,我会看到以下内容:

enter image description here

正如您所看到的,text-shadow正在使用默认样式,而不会被移动样式覆盖。

为什么会发生这种情况,有没有办法解决这个问题?或者我是否必须创建一个完整的新DIV并隐藏在默认样式中并以移动方式显示?

1 个答案:

答案 0 :(得分:2)

使用/* */实际上并没有在浏览器端将其设置为空,它只是将其视为CSS中的注释行,并使用其他地方实际设置的内容。

将注释掉的行更改为此

text-shadow: none;