Question

我很困惑地在IE和Edge中的◆标记周围显示一个图标<hr>。我创建了一个应用于hr的类，它在Firefox和Chrome中显示得很好，但我不确定如何让IE表现出来。

但在IE和Edge中，图标隐藏在视图之外。我认为它们根本没有显示，但当我向:before和:after添加更长的内容时，我可以看到内容隐藏在<hr>后面，作为文本的一部分在线下可见。

我尝试overflow: visible但它保持不变，添加padding会将图标推到hr以下。任何帮助非常感谢！

CSS：

hr.fancy {
  border: 0;
  width: 50%;
  border-top: 1px solid #E67E48;
  margin: 0 auto;
}

hr.fancy:after,
hr.fancy:before {
  content: '◆ test';
  position: relative;
  top: -11px;
  color: #111;
  font-size: 14px;
  color: #E67E48;
}

hr.fancy:before {
  float: left;
  right: 20px;
}

hr.fancy:after {
  float: right;
  left: 20px;
}

JS Fiddle

Answer 1

我猜我错了......它适用于IE中的<hr/>元素，Edge

＆＃13;

hr.fancy {
  position: relative;
  width: 50%;
  margin: 0 auto;
  display: block;
  border-top: 1px solid #E67E48;
  clear: both;
  overflow:visible;
}

hr.fancy:after,
hr.fancy:before {
  position: absolute;
  left: -20px;
  color: #E67E48;
  line-height: 0;
  font-size: 14px;
  content: '◆';
}

hr.fancy:after {
  left: auto;
  right: -20px;
}

＆＃13;

<br>
<hr class="fancy" />

＆＃13;

：之前和之后：Microsoft Edge和IE中的HR

1 个答案: