Navigation items padding: Firefox vs. Chrome&IE11 - html

Question

I got strange problem with different rendering of one simple nav/menu. Here is code:
HTML:
<nav id="navigation">
<ul>
<li class="active">HOME<br><span>What we do</span></li>
<li>ABOUT<br> <span>Our expertise</span></li>
<li>SERVICES<br><span>Our products</span></li>
<li>WHY CHOOSE US<br><span>Our promise</span></li>
<li>NEWS<br><span>Updates</span></li>
<li>OUR CHOSEN CHARITY<br><span>Great Ormond Street</span> </li>
<li>CONTACT US<br><span>Get in touch</span> </li>
</ul>
</nav>
Relevant CSS:
#navigation {
width:100%;
clear:both;
background-color:#a9218e;
height:72px;
}
#navigation ul {
width:894px;
height:72px;
list-style-type:none;
margin:0 auto;
padding:0;
box-sizing:border-box;
}
#navigation ul li {
display:block;
float:left;
text-align:center;
padding:10px 22px 0 22px;
margin:0;
height:72px;
box-sizing:border-box;
}
#navigation ul li:last-child {
padding:10px 20px 0 19px;
}
#navigation ul li a {
color:#fff;
text-decoration:none;
width:100%;
height:72px;
font-size:15px;
font-weight:400;
}
#navigation ul li.active {
background-color:#00837e;
}
Test link: http://bybyweb.com/hygeineco/
Well... In Firefox, menu is perfect, it fits container's size (894px). However, in Chrome and IE11 (and i guess lower IE versions), one item is pushed down. So, i guess that there is no space for that item (contact) because of paddings. I've tried to resize container, or to reduce padding, and rendering difference is ~2px, between Chrome and Firefox... With container width of 896px - all is working fine in Chrome, in IE11, anyway, container width should be at least 903px?! What causes these strange differences? I guess that chosen google font rendering is different in every browser. How to solve this issue?

Answer 1

Add This Code Where Ever You Used box-sizing:border-box; :
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
-webkit- is for Safari And Chrome
-moz- is for Mozila (but in your case , the browser could understand it without -moz- )
-o- for Opera and -ms- for IE ;

Answer 2

Almost solved it by using display:table for ul, and display:table-cell for li elements... However, now i just have to remove margin/padding at the bottom.... :)
EDIT: background image position was in question... so, now is perfect. Good old tables - still the best solution for some things. :)
EDIT2: I would remove this question, but i am sure it will help to someone who have similar situation. Conclusion -> when you have menu with different widths of/for every menu item, BUT if you want to place that menu inside fixed width container, setting of right/left padding to li elements (menu items) is obviously not the best solution. Display: table, and display:table-cell is the best (and maybe only?) possible solution.