Internet Explorerでhtml要素が表示されないのはなぜですか？

私はangularjsプロジェクトを担当しています。Internet Explorerでhtml要素が表示されないのはなぜですか？

私はボタンをクリックすることで、表示ビューから編集ビューにモードを変更するHTMLビューを作成しました。

edit-modeという名前のCSSクラスを作成しました。

ここにはplunkerです。ここで

は、私の見解である。ここでは

<form class="form-horizontal form-sm"> 
    <div ng-class="{'edit-mode':editor.edit}"> 

    <div class="form-group"> 
     <div class="col-xs-8"> 
     <span class="view">{{ma.inspection}}</span> 
     <textarea cols="20" rows="2" my-maxlength="5" ng-model="ma.inspection" class="form-control edit"></textarea> 
     </div> 
    </div> 
    <br/> 
    <input type="button" ng-click="editor.edit = false" value="Display mode"> 
    <input type="button" ng-click="editor.edit = true" value="Edit mode"> 

    </div> 
</form>

はコントローラである：ここでは

var app = angular.module('myApp', ['ngAnimate']); 
app.controller('MyApp', [function() { 
    var self = this; 
    this.inspection = "Click on button to change mode!"; 

}]);

は私のCSSコードです：

.edit, input[type=file].edit { 

    display: none; 
} 

.edit-mode { 
    .view { 
     display: none; 
     background-color:red; 
    } 

    .edit, input[type=file].edit { 
     display: initial; 
    } 
}

上記のコードは、Chromeブラウザで完璧に動作します。しかしIEのブラウザ（私はIE 11を使用しています）ではtextarea要素とselect要素が表示されません。

任意のアイデアIEブラウザでもこの問題を解決するにはどうすればこの問題を解決できますか？

出典

2016-05-16 Michael

私はIE 11を使用しています。 – Michael

問題は何ですか？ 'IEブラウザでは動作しません。 '、ここではうまくいかないものがたくさんあります。私は仕事からプランカを訪れることはできません。 –

@ MarcosPrezGude、私は質問を更新しました。 – Michael

initialキーワードはIEで動作しない：以下のリンクを参照してください。 IEの正しい動作（何も動作しません）です。しかし、あなたの問題を解決するには、フォーム要素に正しいものをinlineと書いてください。

display: inline

およびTextArea

display: inline-block

最終的なコードのために：すべての他の回答のように

.edit-mode { 
    .view { 
     display: none; 
     background-color:red; 
    } 

    .edit, input[type=file].edit { 
     display: inline-block; 
    } 
}

出典

2016-05-16 15:41:19

問題はdisplay='initial'です。display='block'に変更してください。 Div display:initial not working as intended in ie10 and chrome 29

出典

2016-05-16 15:40:56

フォーム要素はインライン表示とインラインブロック表示であり、ブロック表示ではありません。 –

はい、あなたは正しいです。私はイニシャルが機能しないと言うのは興味がありました。それは私がここにリンクを投稿した理由です。ありがとうございます@ MarcosPrezGude –

ようこそ。私はあなたに気づくだけで、いくつかの要素の初期値が何であるかを知ることができます。がんばろう！ –

はdisplay:initial;がIEでサポートされていない、と言います。したがって、AngularJSを使用した最良のクロスブラウザソリューションは、ng-showを使用して、CSSではなく要素を動的に非表示にすることです。

これはInternet Explorer 11で動作するようにテストされています。クラスを使用しないでください。

<body> 
    <link href="style.css" rel="stylesheet" /> 
    <div ng-controller="MyApp as ma"> 

    <form class="form-horizontal form-sm"> 
     <!--<div ng-class="{'edit-mode':editor.edit}">--> 

     <div class="form-group"> 
      <div class="col-xs-8"> 
      <span ng-init="editor.edit=false" ng-show="editor.edit == false">{{ma.inspection}}</span> 
      <textarea cols="20" rows="2" ng-show="editor.edit == true" my-maxlength="5" ng-model="ma.inspection" class="form-control"></textarea> 
      </div> 
     </div> 
     <br/> 
     <input type="button" ng-click="editor.edit = false" value="Display mode"> 
     <input type="button" ng-click="editor.edit = true" value="Edit mode"> 

     <!--</div>--> 
    </form> 



    </div> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 
    <script> 
    var app = angular.module('myApp', ['ngAnimate']); 
    app.controller('MyApp', [function() { 

     // default 
     editor = {}; 
     editor.edit = false; 

     var self = this; 
     this.inspection = "Click on button to change mode!"; 

    }]); 
    </script> 
</body>

出典

2016-05-16 15:49:04 chakeda

Internet Explorerでhtml要素が表示されないのはなぜですか？

答えて

関連する問題