爲什麼我無法在Internet Explorer上看到html元素？

我在我的angularjs項目上工作。爲什麼我無法在Internet Explorer上看到html元素？

我創建了HTML視圖，通過單擊按鈕將顯示視圖的模式更改爲編輯視圖。我創建了css類edit-mode。

這裏是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元素和選擇元素不顯示。

任何想法如何解決這個問題，使這項工作也在IE瀏覽器？

來源

2016-05-16 Michael

我正在使用IE 11。 – Michael

究竟是什麼問題？ '不適用於IE瀏覽器'，有很多東西無法在這裏工作。我無法訪問工作中的暴徒。 –

@MarcosPérezGude，我更新了問題。 – 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

表單元素顯示爲內聯和內聯塊，而不是塊。 –

是的你是對的。我只是好奇地說初始不起作用。這就是爲什麼我在這裏發佈鏈接。謝謝。@MarcosPérezGude –

不客氣。我只注意到你，目的是要了解某些元素的初始價值。祝你好運！ –

像所有其他的答案說，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元素？

回答

相關問題