Question

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

我正在使用Foundation和一个图标字体（icomoon），它从一个样式表加载并从另一个样式表应用了样式。 Chrome / Safari / Firefox都正确地将样式应用于＆＃39; class＆＃39;：之前的元素。但是，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

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

提前致谢。

Answer 1

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

要修复您的网页，请在使用display:inline-block的CSS属性上添加:before。这将告诉伪元素的行为类似于块级元素，然后它们将按预期工作。

e.g。

.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不应用样式表中的样式

1 个答案: