2012-05-12 14 views
7

This submit button deve essere arrotondato sul lato sinistro e puntato sul lato destro. Funziona con browser non-ie, ma in IE9, non funziona.Qualcuno sa perché questo: dopo il CSS non funziona in IE9?

Se guardo gli stili negli strumenti di sviluppo, il pulsante .flat: dopo che la regola ha cancellato tutto, come se venisse sostituito da qualcosa. Che cosa?

<button type="submit" class="flat-button">Submit</button> 
<style> 
.flat-button { 
    float: left; 
    position: relative; 
    border-top-left-radius: 5px; 
    -moz-border-top-left-radius: 5px; 
    -webkit-border-top-left-radius: 5px; 
    border-bottom-left-radius: 5px; 
    -moz-border-bottom-left-radius: 5px; 
    -webkit-border-bottom-left-radius: 5px; 
    border: none; 
    padding: 0 12px; 
    margin: 0 3px 3px 0; 
    outline: none; 
    cursor: pointer; 
    color: white; 
    font-family:'Trebuchet MS', Arial, helvetica, Sans-Serif; 
    font-size: 14px; 
    font-weight: bold; 
    font-style: italic; 
    text-decoration: none; 
    border-collapse: separate; 
    height: 26px; 
    line-height: 26px; 
    background: #5191cd; 
} 
.flat-button:hover { 
    background: #1c3f95; 
} 
.flat-button:after { 
    position: absolute; 
    content: ' '; 
    height: 0; 
    width: 0; 
    left: 100%; 
    border: 13px solid transparent; 
    border-left-color: #5191cd; 
} 
.flat-button:hover:after { 
    border-left-color: #1c3f95; 
} 
</style> 
+0

A sostegno di @ di thirtydot suggerimento, sì, [con un' a' invece di 'button' sembra lavoro] (http://jsfiddle.net/BWC9q/7/). BoltClock può o non può essere d'accordo. –

+0

Questo è bello sapere, ma mi piacerebbe poterlo usare per l'invio di moduli senza javascript. O c'è un modo per farlo con le ancore in qualche modo? – Chris

risposta

20

Dopo aver giocato un po ', ho trovato una soluzione semplice per IE9.

http://jsfiddle.net/thirtydot/BWC9q/10/

Tutto quello che dovete è aggiungere overflow: visible a .flat-button.

+0

Buon lavoro trenta; come l'hai capito? –

+1

Ho continuato a provare cose. Alla fine ho visto che il 'pulsante' sembrava avere 'overflow: hidden', quindi ho provato' overflow: visible' e ha funzionato. – thirtydot

+0

sei ... un dio? – Chris

Problemi correlati