Opera 中的 CSS 表格单元格为 :before and :after do not behave as normal

Question

我想在CSS中实现如下效果:

我将 CSS table-cell 与 :before 和 :after pseudo-elements 一起使用，以便它们自动-调整一排的宽度。换句话说，我希望文本容器具有文本的宽度(带有一些填充)，并且伪元素填充该区域的其余部分。这意味着我不能使用位于顶部的 1px background-image，因为每个单词都有不同的宽度。

<强> Here's the fiddle 。

HTML

<div id="container">
    <div id="box">
        <h2 id="header">UPDATES</h2>
    </div>
</div>

CSS

#container {
    background:url("http://lorempixel.com/output/abstract-q-g-640-480-9.jpg") center center no-repeat;
    padding-top:50px;
    height:400px;
    width:50%;
    margin:0 auto;
}
#box {
    margin:0 auto;
    width:50%;
    display:table;
}
#header {
    color:#fff;
    font:14px Arial;
    font-weight:500;
    line-height:10px;
    height:10px;
    display:table-cell;
    padding:0 10px;
    width:auto;
    text-align:center;   
}
#box:after, #box:before {
    content:"";
    display:table-cell;
    border:1px solid #fff;
    border-bottom:0;
    height:10px;
    width:50%;
}
#box:after{
   border-left:0;
}
#box:before{
    border-right:0;
}

但是，它在 Opera 中不起作用，所以我需要找到一种不同的技术来达到相同的效果。我宁愿避免使用 HTML 表和任何 js。您能提供什么建议吗？

Answer 1

在这个例子中，我去掉了伪元素，并将标题标签夹在两个样式为表格的标签之间以获得线条效果。尽管这是使用 CSS 表完成的，但类似的概念应该适用于 html 表。

    <div id="before" ></div>
    <h2 id="header">UPDATES</h2>
    <div id="after"></div>         

风格就像这样......

          #before {
              content:"";
              display:table-cell;
              border:1px solid #fff;
              border-bottom:0;
              border-right:0;
              height:10px;
              width:50%;
          }
          #after {
              content:"";
              display:table-cell;
              border:1px solid #fff;
              border-bottom:0;
              border-left:0;
              height:10px;
              width:50%;
          }

http://jsfiddle.net/SteveRobertson/9SBXn/12/