2011-09-24 7 views
5

Per qualche motivo, esclusivamente su macchine Windows, sul pulsante Accedi in questa pagina, sto ottenendo questo strano schema sfocato che è difficile da spiegare , in modo da vedere di persona:Struttura sfocata su un pulsante modulo quando si utilizza un'immagine di sfondo con raggio di 20px

http://zis.smartlyedu.com/login

non appare su Mac OS, ma non su Windows.

Qualcuno ha riscontrato questo prima?

Ecco il CSS per il pulsante:

div.input-submit input{ 
    outline:none; 
    font-family:Helvetica, Arial, sans-serif; 
    width:100px; 
    height:35px; 
    color:#fff; 
    font-weight:normal; 
    float:right; 
    font-size:18px; 
    text-shadow:#000 1px 1px 1px; 
    border:1px solid #fff; 
    -moz-border-radius:20px; 
    -webkit-border-radius:20px; 
    -o-border-radius:20px; 
    -ms-border-radius:20px; 
    -khtml-border-radius:20px; 
    border-radius:20px; 
    background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.2))); 
    background:-webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2)); 
    background:-moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2)); 
    background:-o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2)); 
    background:-ms-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2)); 
    background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2)); 
    background-color:#31639d; 
    font-weight:bold; 
    border:1px solid #fff 
    } 
+0

Quali browser? Il problema si risolve dopo l'applicazione di 'outline: none;' (CSS) sul pulsante? –

+0

@Rob W, ha detto IE. Alain, puoi pubblicare uno screenshot per quelli di noi senza IE. –

+0

Mi capita su Chrome, FF e IE9. Ho già delineato: nessuno; su di esso, non è purtroppo il problema –

risposta

1

Questa soluzione è stata trovata attraverso i commenti al post originale.

Alain, aggiungi display: nessuno all'elemento di input per confermare che il contorno proviene dall'elemento di input. Se sei sicuro della causa dell'origine, disattiva tutti gli attributi CSS dei selettori che corrispondono al tuo elemento e aggiungili singolarmente. In questo modo, sarai in grado di trovare la causa del tuo problema CSS.

Jason McCreary risposto:

Grazie, ho provato il metodo e ho scoperto che il problema era con il bordo 1px ed il 20px border-radius. A quanto pare su Windows, si spaventano se vengono utilizzati contemporaneamente su un pulsante di invio. Per risolvere esso, tutto ciò che ho fatto è stato rimuovere i bordi e sostituirlo con bordo: nessuno ;. Se togliessi il raggio di confine, funzionerebbe anche bene. Grazie per l'aiuto!

Problemi correlati