Come implementare “Angolo arrotondato sull’effetto hover” in IE?

Voglio creare un collegamento con l’effetto angolo arrotondato. Tuttavia, l’effetto angolo arrotondato verrà visualizzato solo al passaggio del mouse. Usando CSS3, sta funzionando bene su Mozilla, Chrome e Safari, ma non su IE.

Ecco il mio css

a { color: black; background-color:#ddd; text-align: center;font-weight: bold; width:110px; height:25px; padding: 10px; text-decoration:none; } .abc:hover { background-color: lightblue; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } 

Ecco il mio html

 Button 

Come dice @Michael Rose, IE8 e inferiore semplicemente non supportano gli angoli arrotondati di CSS3.

Ci sono una varietà di soluzioni alternative per applicare gli angoli arrotondati in queste versioni di IE.

Per quanto ne so, il meglio di queste soluzioni alternative è CSS3 PIE .

Guarda un’altra risposta rilevante che ho scritto:

Il file .htc è una buona pratica nelle versioni precedenti di IE per gli angoli arrotondati come ha fatto il CSS3?


Modifica in risposta al tuo commento modificato: sono abbastanza sicuro che CSS3 PIE supporti :hover passa il :hover modo corretto.


Modifica 2:

L’ho appena provato, questo CSS funziona:

 a { color: black; background-color:#ddd; text-align: center;font-weight: bold; width:110px; height:25px; padding: 10px; text-decoration:none; behavior: url(PIE.htc); } .abc:hover { background-color: lightblue; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } 

Per farlo funzionare, ho spostato la proprietà di behavior in a blocco anziché in .abc:hover blocco .abc:hover .

È semplicemente perché i bordi arrotondati sono implementati solo in IE9 e non in basso.

Si potrebbe verificare la compatibilità con IE9, basta aggiungere

  

alla tua intestazione di pagina e funzionerà, si spera che sia

Prova questo. Funzionerà per IE9

 
.rounded { height: 100px; width: 100px; margin-right: 20px; padding: 5px; border:2px solid #404040; border-radius: 5px; }