Campo ricerca non si visualizza correttamente con tutti i browser

Questo è il css:

/* Box del campo totale di ricerca */
.boxricerca {
    width: 180px !important;
}

/* Campo Cerca */
.s, .field { 
    width: 130px !important;
    border: 1px solid #E6E6E6 !important;
    border-top-left-radius: 4px !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 0 !important;
    padding-right: 0px !important;
} 

/* Pulsante "Cerca" */
#searchsubmit {
    position: relative;
    float: right;
    background: rgb(238,238,238); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eee', endColorstr='#ccc',GradientType=0 ); /* IE6-9 */
    width: 50px !important;
    height: 34px !important;
    color: #408000 !important;
    margin-top: 2px !important;
    margin-left: -10px !important;
    box-shadow: 0px 0px 0px #666;
    border-top-right-radius: 4px !important;
    border-top-left-radius: 0 !important;
    border-bottom-right-radius: 4px !important;
    border-bottom-left-radius: 0 !important;
    text-transform: capitalize;
    z-index: 10;
}
#searchsubmit:hover {
    position: relative;
    float: right;
    width: 50px !important;
    height: 34px !important;
    color: #ff6666 !important;
    border-top-right-radius: 4px !important;
    border-top-left-radius: 0 !important;
    border-bottom-right-radius: 4px !important;
    border-bottom-left-radius: 0 !important;
    text-transform: capitalize;
    z-index: 10;
} 

e questo il codice HTML:

<form class="boxricerca" action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get">
<label class="assistive-text"> <?php _e( 'Search', 'wp-portfolio' ); ?> </label>
<input type="search" placeholder="<?php esc_attr_e( 'Search', 'wp-portfolio' ); ?>" class="s field" name="s">
<input type="submit" class="submit" id="searchsubmit" value="<?php echo esc_attr_x( 'Cerca', 'submit button', 'wp-portfolio' ); ?>" />
   </form><!-- search-form -->

Con Safari i visualizza correttamente:



Con altri browser il pulsante non è centrato:

[alemoppo]

Il margine superiore è dato dalla regola:

margin-top: 2px !important;

Dovresti specificare una height anche per l'input text.

p.s: come mai tutti quegli !important? Verrebbero sovrascritti da altro?

Ciao!

Bene, si quegli !important servono per sovrascrivere il css originale.

Qui si presenta un'altra situazione però solo con Safari, quando metto il puntatore sul pulsante, si rimpicciolisce in altezza, ma non lo fa sempre però.