Hyperlink text alignment not always correct in IE 10 - html

Question

I have a very simple HTML table. Table cells have several hyperlinks. Here is an example table with a couple of hyperlinks:
<table cellspacing="0" class="list">
<tr><td style="width:40%"><span style="background-color:#D0D5E6"> </span><br />Text<br />(xx.xx.)</td><td><b>PCafe, Hämla:</b><br />Men 6 ot<br />Pel 32 ot</td><td>Seuraa livenä »</td></tr>
<tr><td style="width:40%"><span style="background-color:#D0D5E6"> </span><br />Text<br />(xx.xx.)</td><td><b>PCafe, Hämla:</b><br />Men 6 ot<br />Pel 32 ot</td><td>Seuraa livenä »</td></tr>
<tr><td style="width:40%"><span style="background-color:#D0D5E6"> </span><br />Text<br />(xx.xx.)</td><td><b>PCafe, Hämla:</b><br />Men 6 ot<br />Pel 32 ot</td><td>Seuraa livenä »</td></tr>
</table>
The problem is that when using IE 10, some of the hyperlink texts are aligned vertically, but not all of them. Some hyperlink texts are 1px below the center while some hyperlink texts are perfect, no problem.
Table rows can be identical, but still, one row has a hyperlink aligned OK and another row has a hyperlink which is not aligned OK. Even if these rows and hyperlinks are 100% identical. They have exactly the same HTML code, I mean.
I have noticed that the first table row has a hyperlink which is always OK. But after the first one, there are several table rows which have hyperlinks which texts are not centered vertically.
I do not know why IE 10 cannot center all hyperlinks vertically. My screen resolution is more than 1024 x 768 px.
And here is the CSS code:
body {
line-height: 18px;
text-align: left;
font-family: "Exo 2", Tahoma, sans-serif;
font-weight: 500;
font-size: 11px;
color: #000000;
}
.pnk {
box-sizing: content-box;
height: 18px;
vertical-align: middle;
text-align: center;
padding-left: 6px;
padding-right: 6px;
padding-top: 2px;
padding-bottom: 2px;
border: 1px solid #323B5A;
background-color: #323B5A;
font-family: "Exo 2", Tahoma, sans-serif;
font-weight: 400;
font-size: 11px;
color: #FFFFFF;
text-decoration: none;
line-height: 18px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#media screen and (min-width: 600px) {
.pnk {
padding-top: 2px;
padding-bottom: 2px;
}
}
#media screen and (min-width: 1050px) {
.pnk {
padding-top: 2px;
padding-bottom: 2px;
}
}
a.pnk {
color:#FFFFFF;
text-decoration: none;
font-weight:400;
display:inline-block;
}
table.list td {
padding-left: 10px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
text-align: left;
vertical-align: middle;
display: block;
box-sizing: border-box;
float: left;
}
#media screen and (min-width: 600px) {
table.list td {
padding-left: 10px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 0px;
border-bottom: 1px dotted #999999;
text-align: left;
vertical-align: middle;
display: table-cell;
box-sizing: content-box;
float: none;
}
}