我有以下 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;
关于html - 为什么常规样式会覆盖文本阴影的移动样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22174699/