2012-05-12 7 views
7

This submit button debe ser redondeado en el lado izquierdo, y señaló en el lado derecho. Está funcionando en navegadores que no sean, pero en IE9, no funciona.Alguien sabe por qué esto: después de que CSS no funciona en IE9?

Si miro a los estilos en las herramientas de desarrollo, el botón .flat: después de la regla tiene todo lo tachado, como si es reemplazado por algo. ¿Qué?

<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

En apoyo de la sugerencia de @ thirtydot, sí, [usando un' a 'en lugar de' button' parece trabajo] (http://jsfiddle.net/BWC9q/7/). BoltClock puede o no estar de acuerdo. –

+0

Eso es bueno saberlo, pero me gustaría poder usarlo para el envío de formularios sin javascript. ¿O hay alguna manera de hacer eso con anclajes de alguna manera? – Chris

Respuesta

20

Después de jugar por un tiempo, encontré una solución simple para IE9.

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

único que hay que añadir es overflow: visible a .flat-button.

+0

Buen trabajo thirtydot; ¿Cómo te diste cuenta de eso? –

+1

Solo seguí intentando cosas. Eventualmente vi que el 'botón' parecía tener' overflow: hidden', entonces probé 'overflow: visible' y funcionó. – thirtydot

+0

eres ... un dios? – Chris

Cuestiones relacionadas