IE10/Windows 8 dziwny kontur i efekt cienia na wszystkie elementy

Question

Jeśli ktokolwiek może w tym pomóc, byłoby super. Mam dziwne problemy z renderowaniem w IE10/Win8. Wszystko działa dobrze we wszystkich innych przeglądarkach, w tym w IE10/Win7, ale IE10/Win8 wyświetla dziwne kontury lub cienie na wszystkich elementach po zaznaczeniu lub najechaniu.

Próbowałem ustawienie wszystkich elementów (*) do outline:none lub outline:transparent na *:active, *:focus, *:hover bezskutecznie. Wyłączyłem również przejścia, ale efekt nadal się pojawia. Używam Twitter Bootstrap z innymi niestandardowymi stylami. Wszystkie przejścia odbywają się za pośrednictwem Bootstrap.

IE10 nie obsługuje instrukcji warunkowych, więc uruchomiłem następujący skrypt, aby dodać do klasy html klasę ie10 i dodać style specyficzne dla IE10.

$(document).ready(function(){ 

    if(($.browser.msie) && ($.browser.version == "10.0")){ 
     $('html').addClass('ie10'); 
    } 

}); 

Nadal nie działa. Załączam zrzuty ekranowe problemu, z którym się spotykam (tylko IE10/Win 8).

Oto niektóre przykładowy kod do pola tekstowego:

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; 
} 

Bootstrap style

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; 
} 

Poniżej są style dla zielonych przycisków:

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); 
} 

Bootstrap style

.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); 
} 

żadnej pomocy na zastanawianie się, co się dzieje i jak to naprawić to będzie bardzo mile widziane. Próbowałem wszystkiego, w tym resetowanie stylów outline i border do transparent i none dla wszystkich elementów, jeśli przeglądarka ma wartość ie10. Brak szczęścia. Każda pomoc będzie bardzo ceniona. Wielkie dzięki.

Answer 1

Posiadałem play to see if I could recreate this.

Pomysł, że skacze na uwadze to, że Internet Explorer jest dodanie stylów obrazów wewnątrz kotwic, więc można zatrzymać się to za pomocą ...

a img { 
    border: none; 
} 

Answer 2

To go naprawić.

background-clip: padding-box; 

Znalazłem to na moim .modal-content klasie bootstrap i to, co było przyczyną problemu.

Usuń tę właściwość, a wszystkie problemy powinny zniknąć.