javascript - bootstrap.css 和 IE11 问题

标签 javascript angularjs html twitter-bootstrap-3

我正在使用 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>

它看起来像什么: enter image description here 有什么解决这个问题的建议吗?

编辑

按照要求的按钮 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>

最佳答案

我主要在尝试使用 col-md-1 div 中的内容时看到这种情况发生。传统上,内容超出容器的宽度,因此按钮的大小正确,但文本不会被 chop ,并且会显示溢出。

我修改了你的 html 的一些内容,也许可以更好地工作:

Plnkr Here

enter image description 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>

关于javascript - bootstrap.css 和 IE11 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31120582/

相关文章:

javascript - 以编程方式在 Angular Material 中打开 md-datepicker

html - 用 border-radius 隐藏的溢出仍然显示小边框

javascript - 一个函数对应多个元素

javascript - 确保 Angular Controller 中的函数只运行一次

javascript - 如何在新窗口中使用jspdf打开生成的pdf

javascript - 使用服务传递数据的 undefined variable

javascript - 使用 Axios 将数据从 Vue.js 传递到 PHP

javascript - 在 div 中添加垂直线最实用的方法是什么?

javascript - 迭代树序列化函数

javascript - 触摸浏览器中的元素(如指针事件 : none)