Question

我有一个使用HTML5 Bolierplate的WordPress主题。同样，我使用Jetpack plugin的“编辑CSS”模块对主题的CSS进行修改和添加。

通过Jetpack的“编辑CSS”模块，我为各种WordPress小部件标题定义了一些3维CSS文本阴影。

.example-widget h3{   
    color: #fff;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 
    0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 
    0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 
    0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 
    0 20px 20px rgba(0,0,0,.15);
}

问题，在Internet Explorer上，不支持3D文本阴影（至少IE9。我没有在IE10上测试过），白色字体不适用于浅色背景。在IE上，我需要#444的颜色来替换3D文本效果。

Bolierplate在<head>中定义了以下内容，但我似乎无法弄清楚如何为所有IE版本定义字体颜色：

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

为了让它不受影响，我相信我会被要求证明为什么我把这个问题放在这里，而不是WordPress Answers - 原因，他们会告诉我这不是一个WordPress具体问题，虽然我想知道Jetpack“编辑CSS”模块是否可以发挥作用，因为模块中的CSS是在主题中定义所有样式表后加载的。

Answer 1

将你的风格包裹在条件 -

中

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

然后在你的all-ie-only.css stylehseet上，你只需要像 -

这样的东西

body {
    color: red;
}

您可能还需要为覆盖上述内容的任何元素创建替代。例如 -

.example-widget h3 { 
    color: red;
}

Answer 2

两种快速的方法。

功能检测 - See Modernizr。＆lt; - 首选选项

这不会检查浏览器版本，只检查浏览器是否支持text-shadow。您可以在页面顶部调用Modernizr脚本。然后你创建一个类：

.example-widget {
    color: blue;
}

.no-text-shadow .example-widget {
    color: red;
}

条件评论

我最喜欢这样做的方法，因为它可以让你将所有CSS保存在一个文件中。

<!--[if lt IE 7]>      <html class="no-js ie lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js ie lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js ie lt-ie9"> <![endif]-->
<!--[if IE 9]>         <html class="no-js ie ie9"> <![endif]-->
<!--[if gt IE 9|!IE]><!--> <html class="no-js"> <!--<![endif]-->

然后你使用：

.example-widget {
   color: blue;
}

.ie .example-widget {
   color: red;
}

Answer 3

您可以使用 Internet Explorer条件评论。将条件注释添加到<head>标记。以下内容适用于理解条件注释的所有Internet Explorer版本：

<!--[if IE ]>
  <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

在css文件中（在本例中，它将是iecss.css）添加以下类

.example-widget h3 {
   color: #444
}

Internet Explorer将使用此类（使用颜色：＃444）而不是具有3d效果的原始.example-widget类。

有关Internet Explorer条件注释的详细信息，请参阅此文章： http://reference.sitepoint.com/css/conditionalcomments

如何为所有Internet Explorer浏览器版本使用不同的字体CSS颜色？

3 个答案: