Question

我在我的angularjs项目上工作。

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

我创建了名为edit-mode的css类。

以下是我的观点：

<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浏览器上？

Answer 1

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

Answer 2

问题是$(window).bind("pageshow", function(event) { if (event.originalEvent.persisted) { window.location.reload() } });将其更改为display='initial'。请参考以下链接： Div display:initial not working as intended in ie10 and chrome 29

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元素？

3 个答案: