css problem

sorien

takze v riadku mam button, input typu submit a anchor s triedou "button" potrebujem spravit aby vyzerali uplne totozne(vyska, umiestnenie textu, zarovnanie) s presnostou na pixel vo ff, opera, chrome

Kód: Vybrať všetko

<!doctype html>
<head>
<style>
    button, a.button, input[type=submit]
    {
        border: 1px solid #000000;
        display: inline-block;
        font-size: 12px;
        margin: 0;
        padding: 0px 8px;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        height: 30px;
        font-family: arial;
        white-space: normal;
        text-decoration: none;
        text-align: center;
    }

    a.button span {
        text-align: center;
        line-height: 30px;
    }
</style>
</head>
<body>
<div>
    <button>Refresh tests</button><input type="submit" value="Refresh tests"/><a class="button" href="#"><span>Refresh tests</span></a>
</div>
</body>
</html>

vo ff to vyzera totozne ale v opere a chrome to skace o 1px ... vie niekto preco, alebo ako to vyriesit? bez toho aby to ovplyvnilo ff a nutnosti separatnych css

//autoeditácia príspevku (15 Jún 2011, 11:45)
takze nemusite sa trapit k

Kód: Vybrať všetko

button, a.button, input[type=submit]
{
 traba pridat vertical-align a ten 1px skok zmizne