フィールドセットのCSS 'top'がchromeとfirefoxで異なる動作をする

Question

fieldsetの右上隅にアイコンを配置したいとします。私はChromeを使用する場合には、次のようになります。

しかし、私の驚きのためのFirefoxは、下のアイコンを示していますexampleで

私はnormalize.cssとブートストラップを使用しています。 CSS。

誰かがこの奇妙な動作の理由を知っていますが、ブラウザごとに異なるスタイルを作成しなければ回避策がありますか？

Answer 1

実際のFirefoxのバグであると思われる。代わりのラッパーのdivに：「相対位置」

https://bugzilla.mozilla.org/show_bug.cgi?id=942341

が回避策はdiv要素でフィールドセットをラップすると、CSSルールを適用することであろうフィールドセット

fieldset { 
 
    border: none; 
 
} 
 

 
.wrap { 
 
    position: relative; 
 
} 
 

 
.abs { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
}

<div class="wrap"> 
 
<fieldset> 
 
    <legend>Legend</legend> 
 
    <div class="abs">X</div> 
 
</fieldset> 
 
</div>