0

我有一个使用HTML5 Bolierplate的 WordPress 主题。同样，我使用Jetpack 插件的“编辑 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 答案上- 原因，他们会告诉我这不是一个 WordPress 特定的问题，尽管我想知道如果 Jetpack“编辑 CSS”模块可能会发挥作用，因为模块中的 CSS 是在主题中定义所有样式表之后加载的。

4

3 回答 3

2

将您的样式包装在 ie 条件中 -

<!--[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;
}
于 2013-02-06T07:21:18.167 回答
2

两种快速的方法。

特征检测 -请参阅 Modernizr。<-- 首选选项

这不会检查浏览器版本，只是浏览器是否支持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;
}
于 2013-02-06T07:36:38.590 回答
0

您可以使用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）而不是.example-widget具有 3d 效果的原始类。

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

于 2013-02-06T07:29:43.493 回答