Question

我使用自由职业者主题进行引导。对于这个，在横向规则上有一颗漂亮的星。

在FireFox和Chrome上，它运行正常。在Internet Explorer和Edge上，它不起作用。

我将所有hr。***** css规则更改为div。*****规则并更改页面（将hr更改为div，并添加结束标记）。此版本适用于四种主要浏览器。

我注意到在删除时：

top: -0.8em;

图标显示如下。这就像人力资源部门不允许有任何东西......

有人可以解释为什么HR CSS规则在IE / Edge中不起作用吗？

CodePen：http://codepen.io/anon/pen/gmpPrO

body{
  background-color: #18BC9C;
}
div.star-light {
  padding: 0;
  border: none;
  border-top: solid 5px;
  text-align: center;
  max-width: 250px;
  margin: 25px auto 30px;
}
div.star-light {
  border-color: white;
}
div.star-light:after{
  font-family: FontAwesome;
  content: "\f0d0";
  display: inline-block;
  position: relative;
  top: -0.8em;
  font-size: 2em;
  padding: 0 0.25em;
}
div.star-light:after {
  background-color: #18BC9C;
  color: white;
}

hr.star-light {
  padding: 0;
  border: none;
  border-top: solid 5px;
  text-align: center;
  max-width: 250px;
  margin: 25px auto 30px;
}
hr.star-light {
  border-color: white;
}
hr.star-light:after{
  font-family: FontAwesome;
  content: "\f0d0";
  display: inline-block;
  position: relative;
  top: -0.8em;
  font-size: 2em;
  padding: 0 0.25em;
}
hr.star-light:after {
  background-color: #18BC9C;
  color: white;
}

.centered{
  text-align: center;
}

和html：

<div class="centered">
  <p>Some text here</p>
  <div class="star-light"></div>
  <p>Some text after</p>
  <hr class="star-light">
  <p>Some text after after</p>
</div>

具有CSS内容的FontAwesome在IE或Edge

0 个答案: