Question

此代码在Firefox和Chrome中运行良好。问题出在IE和Opera上 - 'OR'仅在高度为2px的区域内可见。

hr {
  height: 2px;
  border: 0;
  background-color: #444;
}

hr:before {
  content: '';
  display: block;
  height: 1px;
  background-color: #111;
}

hr:after {
  content: 'OR';
  color:#ccc;
  display:block;
  text-align:center;
  background-color:#222;
  width:60px;
  margin:-10px auto 0 auto;
}

背景＃222222

HTML中的

只是<hr>

现在有什么建议让它在IE和Opera中运行吗？

由于

--- --- UPDATE [解决] ------------------------------------- --------

需要添加位置：绝对;左：50％; ＆安培; transform：translate（-50％）;

hr {
    height:2px;
    border:0;
    background-color: #444;
    line-height:20px;
}

hr:before {
  content: '';
  display: block;
  height: 1px;
  background-color: #111;
}

hr:after {
    content: 'OR';
    color:#ccc;
    display:block;
    text-align:center;
    background-color:#222;
    width:60px;
    margin-top:-10px;
    position:absolute;
    left:50%;
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    transform: translate(-50%);  
}

由于

Answer 1

需要添加位置：绝对;左：50％; ＆安培; transform：translate（-50％）;

hr {
    height:2px;
    border:0;
    background-color: #444;
    line-height:20px;
}

hr:before {
  content: '';
  display: block;
  height: 1px;
  background-color: #111;
}

hr:after {
    content: 'OR';
    color:#ccc;
    display:block;
    text-align:center;
    background-color:#222;
    width:60px;
    margin-top:-10px;
    position:absolute;
    left:50%;
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    transform: translate(-50%);  
}

Answer 2

我理解你的例子，但你做错了。他们是在中间使用文本的另一种方式。删除<hr>代码并将其替换为此示例：

<form>
    <fieldset>
      <legend>MY FORM</legend>
      Name: <input type="text"><br>
      Email: <input type="text"><br>
      Date of birth: <input type="text">
     </fieldset>  
</form>

有<fieldset>和<legend>标签用于显示行中间的文字

带有＆＃39; OR＆＃39;的<hr />标签在中间

2 个答案: