Here is your solution:
.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>
Remove the margin-left
properties in your code and use left
instead.
It's working fine in both Chrome and IE10.
JSFiddle: http://jsfiddle.net/4KX3u/7/