HTML5 css et différence entre Chrome et Firefox

[Une Bévue‏]

j'ai un petit problème en HTML5 entre Chrome et Safari d'une part et
Firefox d'autre part, les versions :
Google Chrome 16.0.912.0 dev
Firefox Nightly 10.0a1 (2011-10-19) (même chose avec Firefox tout court)
Safari Version 5.1.1 (7534.51.22)

Une copie écran :
<http://cjoint.com/11oc/AJui45VwaON_All-10px.png>

Le HTML5 (dans le body) :

<footer>

[...]

<div id='footer_center_tiny'>
<!-- pour essai CSS -->
<button class="tiny selected" value='1'>1</button><button
class="tiny" value='2'>2</button><button
class="tiny" value='3'>3</button><button
class="tiny" value='4'>4</button><button
class="tiny" value='5'>5</button><button
class="tiny" value='6'>6</button><button
class="tiny" value='7'>7</button><button
class="tiny" value='8'>8</button><button
class="tiny" value='9'>9</button><button
class="tiny" value='10'>10</button><button
class="tiny" value='11'>11</button><button
class="tiny" value='12'>12</button><button
class="tiny" value='13'>13</button><button
class="tiny" value='14'>14</button><button
class="tiny" value='15'>15</button><button
class="tiny" value='16'>16</button><button
class="tiny" value='17'>17</button><!-- button
class="tiny" value='18'>18</button><button
class="tiny" value='19'>19</button><button
class="tiny" value='20'>20</button><button
class="tiny" value='21'>21</button -->
</div>

[...]

</footer>

Le css relatif :

footer {
height: 40px;
bottom: 0;
}

footer div#footer_center_tiny {
position: absolute;
right: 50%;
width: 17.5%;
height: 16px;
margin: 6px 5px 6px 5px;
padding: 5px 5px 5px 5px;
text-align: right;
/*
background: lightgrey;
*/
}

button.tiny {
vertical-align: middle;
font-family:Tahoma, Geneva, sans-serif;
font-size: 10px;
/*
font-size:0.5em;
*/
font-weight:900;
border-radius:1px;
-moz-border-radius:1px;
-webkit-border-radius:1px;
-moz-box-shadow:0px 0px 1px rgba(219,233,42,0.4);
-webkit-box-shadow:0px 0px 1px rgba(219,233,42,0.4);

color:rgba(0,0,0,0.9);
text-shadow:1px 1px 0px rgba(174,187,13,0.8);
border:1px solid rgba(0,0,0,0.5);

background:-webkit-gradient(linear,0% 0%,0%
100%,from(rgba(174,187,13,1)),to(rgba(74,149,74,1)));

background:-moz-linear-gradient(top,rgba(174,187,13,1),rgba(74,149,74,1)
);

padding: 2px 1px 2px 1px;
margin: 0px 0px 0px 0px;
}
button.tiny:hover {
background:rgba(219,233,42,1);
}
button.selected {
background:rgba(240,73,44,1);
}
button.tiny:active, button:focus {
background:-webkit-gradient(linear,0% 100%,0%
0%,from(rgba(174,187,13,1)),to(rgba(74,149,74,1)));

background:-moz-linear-gradient(bottom,rgba(174,187,13,1),rgba(74,149,74
,1));
}
button.tiny:disabled {
color:rgba(0,0,0,0.4);
text-shadow:1px 1px 0px rgba(174,187,13,0.5);
background:rgba(219,233,42,1);
}
button.tiny:first-child {
border-top-left-radius: 6px;
border-top-right-radius: 1px;
border-bottom-right-radius:1px;
border-bottom-left-radius: 6px;
-moz-border-top-left-radius: 6px;
-moz-border-top-right-radius: 1px;
-moz-border-bottom-right-radius:1px;
-moz-border-bottom-left-radius: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 1px;
-webkit-border-bottom-right-radius:1px;
-webkit-border-bottom-left-radius: 6px;
padding: 2px 1px 2px 4px;
margin: 0px 0px 0px 0px;
}
button.tiny:last-child {
border-top-left-radius: 1px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 1px;
-moz-border-top-left-radius: 1px;
-moz-border-top-right-radius: 6px;
-moz-border-bottom-right-radius: 6px;
-moz-border-bottom-left-radius: 1px;
-webkit-border-top-left-radius: 1px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 1px;
padding: 2px 4px 2px 1px;
margin: 0px 0px 0px 0px;
}

Ça me gène pas mal car il est important pour moi d'avoir le maximum de
tiny buttons et surtout que leur nombre ne varie pas d'un browser à
l'autre.
Là, je remarque que c'est le "padding" qui change autour des chiffres
d'un browser à l'autre.
C'est un problème "connu" ???
Ou, est-ce mon css qui n'est pas adequat ?
Ce que me dira sans doute "SM"...

--
« Si tous ceux qui n'ont rien n'en demandaient pas plus,
il serait bien facile de contenter tout le monde. »
(Coluche)