word-spacing in FireFox too big

I have a menu <UL>

#mainmenu{
  list-style-type:none;
  margin:0;
  padding:0;
  overflow:hidden;
  background-color:#333;
}
#mainmenu li {
  float:left;
  border-right:1px solid white;
}
#mainmenu li.last{
  float:left;
  border:none;
}
#mainmenu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 5px 8px 7px 8px;
  text-decoration: none;
  font-weight: normal;
  font-size: 1.05em;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  word-spacing: 2px;
}
<ul id="mainmenu">
  <li><a href="~/1">Summary</a></li>
  <li><a href="~/2">Element With Some Space</a></li>
</ul>

which has some elements with some word-spacing, nothing fancy:

The issue is that the word-spacing in IE11, Opera, Chrome is 2px as per the CSS but in FireFox it is 4px!?

Tested with 'Segoe UI', sans-serif and Tahoma and get same results.

Any idea why?