2

此代码在 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 中运行吗？

谢谢

---更新---[已解决]---------------------------------------- -----

需要添加位置：绝对；左：50%；& 变换：翻译（-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%);  
}

谢谢

4

2 回答 2

0

需要添加位置：绝对；左：50%；& 变换：翻译（-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%);  
}
于 2013-09-17T15:00:19.820 回答
-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>标签用于显示行中间的文本

于 2013-09-17T11:04:56.003 回答