IE10/Windows 8すべての要素に奇妙なアウトラインとボックスシャドー効果

Question

誰かがこれを助けることができるなら、それは超だろう。私はIE10/Win8で奇妙なレンダリングの問題を抱えています。すべてIE10/Win7を含む他のすべてのブラウザでうまく動作しますが、IE10/Win8では、選択または上に乗ったときにすべての要素に奇妙なアウトラインやボックスシャドウが表示されます。

私は無駄に*:active, *:focus, *:hoverにoutline:noneまたはoutline:transparentにすべての要素(*)を設定しようとしました。トランジションも無効にしていますが、効果は引き続き表示されます。他のカスタムスタイルでTwitter Bootstrapを使用しています。すべてのトランジションはブートストラップを通じて行われます。

IE10では条件文がサポートされていないため、次のスクリプトを実行してie10クラスをHTMLに追加し、IE10固有のスタイルを追加しました。

$(document).ready(function(){ 

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

}); 

まだ動作しません。私は直面している問題のスクリーンショットを添付しました（IE10/Win 8のみ）。

ここでテキストボックスのいくつかのサンプルコードです：

HTML

は

HTML

0123： ​​

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

ブートストラップスタイルの下

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

は緑のボタンのスタイルです

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

ブートストラップスタイル

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

何が起こっているかを把握し、どのようにそれを修正するために、任意の助けもいただければ幸いです。ブラウザがie10の場合、すべての要素のactive, focus and hoverの状態のoutlineとborderのスタイルをtransparentとnoneにリセットすることを含め、すべてを試してみました。運がない。どんな助けでも大歓迎です。どうもありがとう。

Answer 1

私はplay to see if I could recreate thisでした。

心にジャンプするという考えは、Internet Explorerが使用してこれを止めることができるように...

a img { 
    border: none; 
} 

Answer 2

これはそれを修正する、アンカーの内部の画像にスタイルを追加していることです。

background-clip: padding-box; 

私は私の.modal-contentブートストラップクラスでこれを発見し、これが問題を引き起こしていたものです。

このプロパティを削除すると、すべての問題がなくなります。