Проблемы с bootstrap.css и IE11

0

Я работаю над приложением AngularJS, используя bootstrap.css. Все отлично работает в 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>

Как это выглядит: Изображение 174551 Какие-нибудь советы по исправлению этого?

РЕДАКТИРОВАТЬ

Как запросил 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>
Теги:
twitter-bootstrap-3

1 ответ

1
Лучший ответ

В основном я видел это при попытке использовать вещи в div col-md-1. Содержимое традиционно превышает ширину контейнера, и поэтому кнопки имеют правильный размер, но текст не усекается, и отображается переполнение.

Я немного модифицировал ваш html, чтобы работать немного лучше:

Plnkr Здесь

Изображение 174551

<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>
Поделиться
  • 0
    Спасибо за это, я не думал о том, что у меня действительно работают кнопки, удалив класс управления формой и выполнив <a class="btn btn-primary" ng-click="searchByDate(dateFrom, dateTo)"> Поиск < / a> Это хорошо работает во всех браузерах, хотя выбор даты
  • 0
    При этом я только что начал играть с ui.bootstrap вместо стандартного CSS, хотя у меня есть еще одна причина ненавидеть, ненавидеть IE, потому что, если chrome может отображать стандартное средство выбора даты CSS, почему IE11 ?!
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню