Internet Explorerで枠線と枠線が重複しています

Question

フォーカスがありますボタンにアウトラインを追加していますが、アウトラインがInternet Explorerの枠線と重なっています。これはChromeで問題なく動作しています。

コード：

<div id="right" role="button" tabindex="0"> 
    <div class="rightcontent"> 
     test 
    </div> 
</div> 

#right { 
height:39px; 
dispaly:inline; 
width:46px; 
} 

.rightcontent { 
padding: 10px; 
width:26px; 
height:18px; 
border-bottom :1px solid #000; 
position:relative; 
} 

リンク：http://jsfiddle.net/yhmcLgus/5/

これは、Internet Explorerのバグですか？要素の外形を外形にしてはいけませんか？

要素の高さを変更せずにできることをお勧めします。

Answer 1

outline-offsetは、要素の外にアウトラインを設定する方法の1つです。しかし、Internet Explorerではうまくサポートされていません。しかし、pseudoelementの代替ソリューションを使用することで、目的の結果を得ることができます。ここで

<div id="right" role="button" tabindex="0"> 
    <div class="rightcontent"> 
    test 
    </div> 
</div> 

#right { 
height:39px; 
dispaly:inline; 
width:46px; 
} 

.rightcontent { 
    padding: 10px; 
    width:26px; 
    height:18px; 
    border-bottom :1px solid #000; 
    position:relative; 
} 

.rightcontent::after { 
    content: ""; 
    position: absolute; 
    top: -2px; 
    left: 0px; 
    display: block; 
    width: 46px; 
    height: 41px; 
    border: 1px solid red; 
} 

それはあなたにもupvoteすることができ、あなたの問題を解決する場合は作業Fiddle