Space between span elements in IE11 - html

Question

Before you disregard this question as removing the white space between the span elements will help me, let me assure you this particular issue is a bit different.
Issue: There is very small gap between span elements occurring only in IE11 only at certain width of the screen, which BTW is not an issue due to white space between span elements.
Code:
<table width="100%" height="50" cellspacing="0" cellpadding="0">
<tbody>
<tr height="15">
<td nowrap="nowrap" style="text-align: center;">
<button >
<span class="buttonLeft"></span><span class="buttonMiddle"><span class="buttonText" >Reset Page</span></span><span class="buttonRight"></span>
</button>
</td>
</tr>
</tbody>
</table>
code :
button {
background: none;
border:none;
}
.buttonLeft, .buttonMiddle, .buttonRight {
background-color: #23609D;
height: 20px;
vertical-align: middle;
padding-top: 2px;
height: 22px;
display: block;
float: left;
}
.buttonRight, .buttonLeft {
width: 10px;
}
.buttonLeft {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.buttonRight {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.buttonText {
white-space: nowrap;
color: #fff;
font-size: 12px;
cursor: pointer;
display: block;
margin-top: 2px;
}
Here is the fiddle for the same jsfiddle
You may not notice the issue at first, try re-sizing the Result section of the fiddle, you will be able to identify the issue.
You can see the resultant as below.
The issue can be solved by removing the style="text-align: center;"
on the td element in the above code or by removing the border-radius styles.
Since the same markup is being used at numerous places in my project, I really don't think changing the markup is the best way to go around.
I'm looking for a CSS solution or if not solution at least the reason behind this odd behavior.

Answer 1

I just add negative margin of 1px for both left and right SPANs :
span.buttonLeft {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
margin-right:-1px;
}
span.buttonRight {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
margin-left:-1px;
}
And add a padding to your .buttonText span in order to give 1px free around your text :
span.buttonText {
display: block;
margin-top: 2px;
padding:0 1px;
}
This solution works, even if it isn't a clean way to do. What happens here ?
2 SPANs are overlapping on the middle one (1px).
(Sorry, JSFiddle seems to be out of order, so I cannot provide a live Demo)