Javascript 为什么在Internet Explorer上看不到html元素？_Javascript_Html_Css_Angularjs_Internet Explorer 11

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

javascript html css angularjs

Javascript 为什么在Internet Explorer上看不到html元素？,javascript,html,css,angularjs,internet-explorer-11,Javascript,Html,Css,Angularjs,Internet Explorer 11,我在做我的angularjs项目我创建了HTML视图，通过单击按钮将模式从显示视图更改为编辑视图我创建了名为编辑模式的css类这是以下是我的看法： <form class="form-horizontal form-sm"> <div ng-class="{'edit-mode':editor.edit}"> <div class="form-group"> <div class="col-xs-8">

我在做我的angularjs项目

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

我创建了名为

编辑模式

的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>

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

问题是

display='initial'

将其更改为

display='block'

。请参阅以下链接：

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。因此，使用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>


{{ma.检查}


var-app=angular.module（'myApp'，['ngAnimate']）；
app.controller（'MyApp'，[function（））{
//违约
编辑器={}；
editor.edit=false；
var self=这个；
this.inspection=“单击按钮更改模式！”；
}]);
我正在使用IE 11。到底是什么问题<代码>不适用于IE浏览器

，这里有很多东西无法使用。我不能从工作中访问plunker。@MarcosPérezGude，我更新了问题。问题是

display='initial'

将其更改为

display='block'

。initial在IE中不起作用。更改为

display:inline

表单元素是display inline和inline block，而不是block。是的。我只是好奇地说，初始值不起作用。这就是我在这里发布链接的原因。谢谢。@MarcosPéRezgude不客气。我只注意到你，你可以学习一些元素的初始值。祝你好运

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