IEとChromeの角度差分

Question

重複している2つのボタンがあり、同じフラグを持つmに対してng-hideを使用しています。 Chromeでは完全に機能しますが、IE 11を使用すると、ページの読み込み時にアイコンが重なって表示されます。

私は私の検索ボックスに上の2つのアイコンがあります。

、ページがロードされIE11、オン：

コードは次のとおりです。

どう

<button type="submit" class="btnSubmit" ng-show="vm.isSearchIconVisible" > 
       <i class="iconMglass"></i> 
</button> 
<button type="reset" ng-show="!vm.isSearchIconVisible" class="clearTextButton" ng-click="vm.clearSearchText()"> 
       <span class="clearIcon">X</span> 
</button> 

私はそれを修正することはできますか？

Answer 1

ng-showの代わりにng-ifを使用してください。 ng-ifディレクティブはページからコンテンツを削除し、ng-show/ng-hideはCSS表示プロパティを使用してコンテンツを非表示にします。

ng-ifに変更してCSSを使用しないと、これらのCSSの問題を防ぐことができます。 ng-ifは新しいscopeを作成しますが、その影響はありません。

<button type="submit" class="btnSubmit" ng-if="vm.isSearchIconVisible" > 
       <i class="iconMglass"></i> 
</button> 
<button type="reset" ng-if="!vm.isSearchIconVisible" class="clearTextButton" ng-click="vm.clearSearchText()"> 
       <span class="clearIcon">X</span> 
</button> 

あなたはng-ifに変更したくない場合は、/作業Plunkrを共有する...ので、あなたの問題を見つける助けてください。おそらくcssの問題になります。

Answer 2

問題は、IE11が古いコードで現金を節約し、CTR + Rデイデントがこの問題を解決したことです。 IE11オプションで現金を節約するオプションを改めて問題を解決すると、新しいコードが表示されます。