如何使用侧面的线条简化此标题,以便它不需要css3背景属性？

Question

我有一个用于居中标题的css类,并在两侧添加垂直居中的线条.问题是,它使用css3背景属性,而不是每个浏览器都支持这些属性.所以我想简化这个以实现跨浏览器兼容性,但我不知道该怎么做.

有没有更简单的方法来实现这一点,没有css3背景(并且没有添加任何额外的元素或静态高度/宽度)？

在这里演示

.section-heading {
  display: table;
  white-space: nowrap;
}

.section-heading:before {
  background: linear-gradient(to bottom, black, black) no-repeat left center / 95% 1px;
  content: "";
  display: table-cell;
  width: 50%;
}

.section-heading:after {
  background: linear-gradient(to bottom, black, black) no-repeat right center / 95% 1px;
  content: "";
  display: table-cell;
  width: 50%;
}

Answer 1

你可以使用fieldset和legend,它不是很漂亮的代码,但你不需要CSS3

http://jsfiddle.net/dASCv/9/

HTML

<fieldset>
    <legend>
        <h2>Example</h2>
    </legend>
</fieldset>

CSS

fieldset {
  text-align:center;
  border:none;
  border-top:1px solid black;
}

legend{
    padding:20px;
}

或其他方法惠特:after和:before

HTML

<div>
        <h2>text TEXT</h2>
</div>

CSS

div {
    text-align: center;
}

h2:before,
h2:after {
    border-top: 1px solid black;
    display: block;
    height: 1px;
    content: " ";
    width: 40%;
    position: absolute;
    left: 0;
    top: 1.4em;
}
h2:after {
   right: 0;  
   left: auto; 
}

http://jsfiddle.net/dASCv/10/