padding chrome vs firefox

estava trabalhando no meu projeto e decidi verificar como ele estava ficando em diferentes navegadores até que me deparei com isso:

No chrome, em meu menu e em outra area do site, onde está sendo aplicada a propriedade padding, o resultado é o desejado:

/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/SWFyWHn.png&key=0817fa80e624c107b3946d407dad700ff73793b012931eeee1d919970e821e00" alt="SWFyWHn.png" />

/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/yZwElgj.png&key=78f0c87b5623ffcb453d950920896ba645be4c515a2b4d12d56b0b0cf2aa7352" alt="yZwElgj.png" />

Ja no firefox, no menu e nesta mesma área, acontece isso:

/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/xRyDPka.png&key=781828162a218c4f45de4db8369d9f9f022a91574df3d1ca5faa2dc2d89bb956" alt="xRyDPka.png" />

/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/wKyCTc3.png&key=5b319b4f636f40149bf14295f59a43faf6e52f169bdc0f8286e6c96c4ea051d3" alt="wKyCTc3.png" />

Alguém tem alguma solução para este problema? Como é possível diferenciar o padding pro chrome e pro firefox?. Não é de meu conhecimento um -moz- para padding :(

aqui esta o codigo do meu menu:

CSS:

* {

 margin: 0px;
 padding: 0px;
}

header{

 position: relative;
 height: 79px;
 width: 100%;
 background-color: #053d74;
}

ul#menuprinc {

 position: absolute;
 font-size: 1.38em;
 top: 29px;
 width: 578px;
 right: 100px;
}

ul#menuprinc a {

 text-decoration: none;
 color: white;
 font-family: Agency FB;
}

ul#menuprinc li {

 display: inline;
 padding-right: 26px;
 padding-left: 29px;
}

ul#menuprinc li.lancamentos {

 border-bottom: 5px solid #762d2f;
 padding-bottom: 21px;
 -webkit-transition: border-bottom 0.2s;
 -moz-transition: border-bottom 0.2s;

}

ul#menuprinc li.topYoutube {

 border-bottom: 5px solid #c0a035;
 padding-bottom: 21px;
 -webkit-transition: border-bottom 0.2s;
 -moz-transition: border-bottom 0.2s;
}

ul#menuprinc li.maisAssistidos {

 border-bottom: 5px solid #579840;
 padding-bottom: 21px;
 -webkit-transition: border-bottom 0.2s;
 -moz-transition: border-bottom 0.2s;
}

ul#menuprinc li.comoFunciona {

 border-bottom: 5px solid white;
 padding-bottom: 21px;
 -webkit-transition: border-bottom 0.2s;
 -moz-transition: border-bottom 0.2s;
}

ul#menuprinc li.lancamentos:hover, header ul#menuprinc li.topYoutube:hover, header ul#menuprinc li.maisAssistidos:hover, header ul#menuprinc li.comoFunciona:hover {

 border-bottom: 5px solid #053d74;
}

HTML:

<header>
 <nav>
 <ul id="menuprinc">
 <a href="#"><li class="lancamentos">Lançamentos</li></a><a href="#"><li class="topYoutube">Top Youtube</li></a><a href="#"><li class="maisAssistidos">Artistas</li></a><a href="#"><li class="comoFunciona">Como Funciona</li></a>
 </ul>
 </nav>
 </header>

https://jsfiddle.net/natant1/gtd9m051/2/

Obrigado