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

Question

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

我将 CSS table-cell 与 :before 和 :after 伪元素 结合使用，以便它们自动- 在一行中调整它们的宽度。换句话说，我希望文本容器具有文本的宽度(带有一些填充)并且 伪元素 填充其余区域。这意味着我不能使用 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/