Se qualcuno può aiutare con questo, sarebbe super. Sto avendo strani problemi di rendering su IE10/Win8. Tutto funziona bene in tutti gli altri browser, tra cui IE10/Win7, ma IE10/Win8 mostra contorni strani o ombre di casella su tutti gli elementi quando selezionato o al passaggio del mouse.IE10/Windows 8 contorno strano e effetto riquadro-ombra su tutti gli elementi
Ho provato a installare tutti gli elementi (*) a outline:none o outline:transparent su *:active, *:focus, *:hover inutilmente. Ho anche disabilitato le transizioni ma l'effetto appare ancora. Sto usando Twitter Bootstrap con altri stili personalizzati. Comunque tutte le transizioni avvengono tramite Bootstrap.
IE10 non supporta le istruzioni condizionali, quindi ho eseguito il seguente script per aggiungere una classe ie10 all'html e aggiungere stili specifici per IE10.
$(document).ready(function(){
if(($.browser.msie) && ($.browser.version == "10.0")){
$('html').addClass('ie10');
}
});
Ancora non funziona. Ho allegato degli screenshot del problema che sto affrontando (solo IE10/Win 8).
Ecco alcuni esempi di codice per la casella di testo:
HTML
<div class="input-placeholder">
<input autofocus="autofocus" class="input-medium" id="user_full_name" name="user[full_name]" size="30" tabindex="1" type="text" value="Sagar Patil">
<a href="#" class="error-msg hide" rel="popover" data-placement="right" data-content="" tabindex="104" data-original-title=""></a>
</div>
CSS
.input-placeholder {
position: relative;
}
#profile .input-medium, #local-testing .input-medium {
width: 344px;
color: #a16d1d;
padding: 10px 13px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
stili Bootstrap
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
background: #fdf7ed;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-o-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border linear .2s,box-shadow linear .2s;
-moz-transition: border linear .2s,box-shadow linear .2s;
-ms-transition: border linear .2s,box-shadow linear .2s;
-o-transition: border linear .2s,box-shadow linear .2s;
transition: border linear .2s,box-shadow linear .2s;
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
display: inline-block;
height: 20px;
padding: 13px;
margin-bottom: 13px;
font-size: 18px;
line-height: 20px;
border: 1px solid #a4875d;
color: #a16d1d;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
}
Qui di seguito sono gli stili per i pulsanti verdi:
HTML
<div class="col3 pull-right">
<a href="#" class="plan_choose btn btn-modal-plan btn-upgrade" data-planinfo="Power Corporate|$350|50 users||45" data-product-type="live_testing" id="plan_45">Upgrade</a>
</div>
CSS
.plans div[class*="col"] {
float: left;
}
.plans .col3 {
width: 94px;
}
.btn-upgrade, .btn-repurchase, .modal-body .btn-upgrade, .modal-body .btn-repurchase {
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,0.25);
background-color: #719a49;
background-image: -moz-linear-gradient(top,#719a49,#4d6a31);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#719a49),to(#4d6a31));
background-image: -webkit-linear-gradient(top,#719a49,#4d6a31);
background-image: -o-linear-gradient(top,#719a49,#4d6a31);
background-image: -ms-linear-gradient(top,#719a49,#4d6a31);
background-image: linear-gradient(to bottom,#719a49,#4d6a31);
background-repeat: repeat-x;
border: 1px solid #344a1e;
-ms-filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff719a49',endColorstr='#ff4d6a31',GradientType=0);
}
stili Bootstrap
.btn {
border-color: #c5c5c5;
border-color: rgba(0,0,0,0.15) rgba(0,0,0,0.15) rgba(0,0,0,0.25);
}
.btn-modal-plan {
display: inline-block;
vertical-align:middle;
width: 92px;
height: 27px;
line-height: 27px;
text-align: center;
font-size: 12px;
float: right;
padding: 0;
margin-top: 7px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-ms-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-o-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
Qualsiasi aiuto per capire cosa sta succedendo e come risolvere il problema sarebbe molto apprezzato. Ho provato tutto compreso il ripristino degli stili outline e border a transparent e none per gli stati active, focus and hover per tutti gli elementi se il browser è ie10. Senza fortuna. Qualsiasi aiuto sarebbe molto apprezzato. Grazie molto.
Si prega di inviare il codice CSS correlato –
Le schermate sono davvero utili - ma avere l'esempio più semplice in HTML e CSS che dimostra il problema sarebbe ancora di più. – Fenton
Hai tracciato gli stili usando gli strumenti di sviluppo di IE (con un elemento offendente selezionato)? –