IE 不应用样式表中的样式答案

【问题标题】：IE not applying styles from stylesheetIE 不应用样式表中的样式
【发布时间】：2015-01-04 09:37:22
【问题描述】：

大家好。我对 IE 有一个奇怪的问题。 IE 正在正确加载我的样式表，但它没有将样式应用于特定的伪选择器组。

我正在使用 Foundation 和一个图标字体 (icomoon)，它从一个样式表加载并从另一个样式表应用到它们。 Chrome/Safari/Firefox 都正确地将样式应用于 'class':before 元素。然而，IE 没有。使用 F12 工具，我可以看到样式表正确加载，并使用 Fiddler 进行了验证。

未应用的 CSS 是：

.icon-bookmarks:before, .icon-blog:before, .icon-bullhorn:before, .icon-info2:before, .icon-lab:before, .icon-bookmarks2:before, .icon-bullhorn2:before, .icon-mail:before, .icon-blog2:before, .icon-graduation:before, .icon-user:before, .icon-users2:before {
color: #fff;
font-size: 6rem;
position: absolute;
top: 2.5rem;
left: 38%;
left: calc(50% - 5.5rem);
border: 5px solid white;
padding: 2.5rem;
margin-top: 2.5rem;
border-radius: 50%; }

.icon-bullhorn:before, .icon-info2:before, .icon-lab:before, .icon-bookmarks2:before, .icon-mail:before, .icon-blog2:before, .icon-facebook:before, .icon-twitter:before, .icon-linkedin:before, .icon-graduation:before, .icon-user:before, .icon-users2:before {
color: #3e729a;
border-color: #3e729a;
margin-top: 0; }

HTML 是：

<div id="featured" class="ss-style-triangles">
    <div class="icon-bookmarks row">
       <h1 class="white">Featured Event</h1>
        <!--Content Stripped-->
    </div>
 </div>

文档头部调用链接如下：

<head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta name="description" content="#">
      <meta name="keywords" content="#">
      <title>CCIP - CCC | Home</title>
      <link rel="stylesheet" href="./css/normalize.css" />
      <link rel="stylesheet" href="./css/foundation.min.css" />
      <link rel="stylesheet" href="./icomoon/style.css" />
      <link rel="stylesheet" href="./foundation-icons/foundation-icons.css" />
      <link rel="stylesheet" href="./slick/slick.css"/>
      <link rel="stylesheet" href="./css/style.css" />
      <script src="./js/vendor/modernizr.js"></script>
  </head>

开发站点的链接是： here

我知道这可能是我忽略的一些简单的事情，但我可以终生找到它。任何帮助表示赞赏，如果需要，我可以提供更多信息。

提前致谢。

【问题讨论】：

我们说的是哪个版本的IE？
在您使用 :before 的 CSS 属性上添加 display:inline-block。
@SurrealDreams：所有版本。我目前正在IE11中调试。
@wf4 就是这样。非常感谢。现在我需要进一步研究以找出导致问题的原因。

标签： html css internet-explorer cross-browser zurb-foundation

【解决方案1】：

当使用:before 时，您实际上并没有在 DOM 中插入任何内容，而是使用 CSS 来为页面中的额外内容设置样式。目前你使用position: absolute;，但你没有宽度，没有高度，默认情况下，任何伪内容都会内联。

要修复您的页面，请在您使用 :before 的 CSS 属性中添加 display:inline-block。这将告诉伪元素表现得像块级元素，然后它们将按照您的预期工作。

例如

.icon-bookmarks:before, .icon-blog:before, .icon-bullhorn:before, .icon-info2:before, .icon-lab:before, .icon-bookmarks2:before, .icon-bullhorn2:before, .icon-mail:before, .icon-blog2:before, .icon-graduation:before, .icon-user:before, .icon-users2:before {
color: #fff;
font-size: 6rem;
position: absolute;
top: 2.5rem;
display:inline-block; /* <-- add this  */
left: 38%;
left: calc(50% - 5.5rem);
border: 5px solid white;
padding: 2.5rem;
margin-top: 2.5rem;
border-radius: 50%; }

【讨论】：

我不应该感到惊讶，这只是 IE 的一个问题。感谢您的详尽解释。