bootstrap.css 和 IE11 问题答案

【问题标题】：bootstrap.css and IE11 issuesbootstrap.css 和 IE11 问题
【发布时间】：2016-07-27 23:07:24
【问题描述】：

我正在使用 bootstrap.css 开发 AngularJS 应用程序。在 chrome 中一切看起来都很棒，但我在 Firefox 和 IE11 中都遇到了格式问题。

头

        <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Application</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/simple-sidebar.css" rel="stylesheet">


    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-resource.js"></script>
<script src="js/dirPagination.js"></script>
<script src="app/myAppAccounts.js"></script>
<base href="/">
</head>

它的样子：解决此问题的任何提示？

编辑

按照请求的 HTML 按钮。这些是部分的。

   <div class="col-md-2">
      <input ng-model="dateFrom" type="date" class="form-control">
    </div>
     <div  class="col-md-2">
      <input ng-model="dateTo" type="date" class="form-control">
    </div>
    <div class="col-md-1">
      <button class="form-control" type="button" ng-click="searchByDate(dateFrom, dateTo)" > Search </button>
    </div>
    <div class="col-md-2"></div>
    <div class="col-md-3" >
        <input ng-model="orderID" class="form-control" type="text" placeholder="Search by order ID">

     </div>
    <div class="col-md-1">
       <button class="form-control" type="button" ng-click="searchByID()"> Search </button>
    </div>

【问题讨论】：

你能告诉我们这些按钮的 html 吗？
是的，你去吧！

标签： javascript angularjs html twitter-bootstrap-3

【解决方案1】：

我主要在尝试使用 col-md-1 div 中的内容时看到了这种情况。内容通常超出容器的宽度，因此按钮大小正确，但文本不会被截断，并且会显示溢出。

我已经修改了一些你的 html 可能会更好一点：

Plnkr Here

<div class="col-md-12 ">
  <div class="col-md-6 text-left">
     <div class="col-md-4">
       <input ng-model="dateFrom" type="date" class="form-control"  placeholder="Start Date">  
     </div>
     <div class="col-md-4">
       <input ng-model="dateTo" type="date" class="form-control" placeholder="End Date">
     </div>
     <div class="col-md-4">
       <button class="form-control" type="button" ng-click="searchByDate(dateFrom, dateTo)" > Search </button>
     </div>
   </div>

   <div class="col-md-6 text-right">
     <div class="col-md-8" >
       <input ng-model="orderID" class="form-control" type="text" placeholder="Search by order ID">
     </div>
     <div class="col-md-4">
      <button class="form-control" type="button" ng-click="searchByID()"> Search </button>
     </div>
   </div>
</div>

【讨论】：

谢谢你，我没想到通过删除表单控件类并执行搜索这适用于所有浏览器，但日期选择器很糟糕
话虽如此，我刚刚开始使用 ui.bootstrap 而不是使用标准 CSS，尽管我还有另一个理由讨厌、讨厌、讨厌 IE，因为如果 chrome 可以呈现标准的 CSS 日期选择器为什么IE11不能？！
赞成指出我完全错过的显而易见的事情:-)
@MrkFldig 是的，利用我和您的更改的好处是当您开始左右滑动 html 窗口时获得的响应能力。你可以看到他们的行为有多么不同。
@MrkFldig 我过去使用过 ui.bootstrap/AngularUI 指令，它们很棒。您可能认为可以避免它们，但如果您以后可以访问它们，它们最终会为您节省大量时间。