問題：在Internet Explorer 10之前和之後：

這基本上在h1元素之前和之後添加兩行，如下所示：該行只是背景顏色，高度爲1px。問題：在Internet Explorer 10之前和之後：

------------------------ Some Text -------------------- ----

我在Chrome和Firefox中測試了這一點，並且一切正常，但是當我在Internet Explorer 10中測試它時，不顯示LEFT行。

.ItemHeader div h1 { 
 
    position:relative; 
 
    overflow:hidden; 
 
    z-index: 1; 
 
    text-align: center; 
 
    font-weight:bold; 
 
    font-size: 0.8em; 
 
} 
 
.ItemHeader div h1:before, .ItemHeader div h1:after { 
 
    top: 50%; 
 
    overflow:hidden; 
 
    height: 1px; 
 
    content:"\a0"; 
 
    background-color:#a2a2a2; 
 
    position: absolute; 
 
    width:50%; 
 
} 
 
.ItemHeader div h1:before { 
 
    margin-left:-51%; 
 
    text-align: right; 
 
} 
 
.ItemHeader div h1:after { 
 
    margin-left:1%; 
 
}

<div class="item-block"> 
 
    <div class="ItemHeader"> 
 
     <div> 
 
      <h1>Application</h1> 
 
     </div> 
 
    </div> 
 
</div>

結帳的JSFiddle

來源

2013-10-31 Eric Bergman

ahaaaa。我看到你的麻煩。現在我正在研究Eric Ericman先生。大聲笑...像Cartman。 =）））） –

這裏是您的解決方案：

.ItemHeader div h1 { 
 
    position:relative; 
 
    overflow:hidden; 
 
    z-index: 1; 
 
    text-align: center; 
 
    font-weight:bold; 
 
    font-size: 0.8em; 
 
} 
 
.ItemHeader div h1:before, .ItemHeader div h1:after { 
 
    top: 50%; 
 
    overflow:hidden; 
 
    height: 1px; 
 
    content:"\a0"; 
 
    background-color:#a2a2a2; 
 
    position: absolute; 
 
    width:50%; 
 
} 
 
.ItemHeader div h1:before { 
 
    left:-5%; 
 
    text-align: right; 
 
} 
 
.ItemHeader div h1:after { 
 
    left:55%; 
 
}

<div class="item-block"> 
 
    <div class="ItemHeader"> 
 
     <div> 
 
      <h1>Application</h1> 
 
     </div> 
 
    </div> 
 
</div>

取出012代碼中的屬性，並使用left代替。

它在Chrome和IE10都能正常工作。

JSFiddle：http://jsfiddle.net/4KX3u/7/

來源

2013-10-31 19:33:38

使用「左邊」不是邊距的問題在於，如果文本長度發生變化，但與邊距不會發生，則線條與文本相交。 –

以下是使用左側的問題，我將文本更改爲更長的一個：http://jsfiddle.net/4KX3u/9/ –

但是，伯格曼先生，您使用絕對值：http：// jsfiddle。 net/4KX3u/11/ Phew =） –

問題：在Internet Explorer 10之前和之後：

回答

相關問題