为什么我在 Internet Explorer 上看不到 html 元素？

Question

我在做我的 angularjs 项目。

我创建了 HTML 视图，它通过单击按钮将模式从显示视图更改为编辑视图。

我创建了 css class 命名为 edit-mode。

这是我的观点：

<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 浏览器上也能正常工作吗？

Answer 1

问题是 display='initial' 将其更改为 display='block'。参考下面的link： Div display:initial not working as intended in ie10 and chrome 29

Answer 2

initial 关键字在 IE 上不起作用。很好，IE 的正确行为（没有任何作用）。但要解决您的问题，请为表单元素编写正确的 inline。

 display: inline

对于文本区域

 display: inline-block

最终代码：

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

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

Answer 3

就像所有其他答案所说的那样，IE 不支持 display:initial;。因此，使用 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>

为什么我在 Internet Explorer 上看不到 html 元素？

Why I cant see html element on Internet Explorer?

html

javascript

css

angularjs

internet-explorer-11