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

Why I cant see html element on Internet Explorer?

本文关键字：看不到 html 元素 Explorer Internet 为什么      更新时间：2023-09-26

我从事angularjs项目。

我创建了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）文本区域元素和选择元素不显示。

有什么想法吗？我该如何解决这个问题，让它也能在IE浏览器上运行？

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;
    }
}

问题是display='initial'将其更改为display='block'。请参阅以下链接：Div显示：最初在ie10和chrome 29 中未按预期工作

就像所有其他答案一样，IE不支持display:initial;。因此，AngularJS的最佳跨浏览器解决方案是使用ng-show动态隐藏元素，而不是CSS。

我已经在InternetExplorer11上测试过了。注意我是如何不使用这些类的。

<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>
相关文章：