Почему css не работает в IE, хотя в Firefox и Chrome он работает должным образом?

    input[type=text], input[type=password], select {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }
    input[type=submit] {
        width: 100%;
        background-color: #808080;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    input[type=submit]:hover {
        background-color: #A9A9A9;
    }
    html,body {
      height:100%;
      width:100%;
      margin:0;
    }
    body {
      display:flex;
      background-color:#D3D3D3;
    }
    form {
      margin:auto;
    }

Приведенный выше код CSS выравнивает форму по центру в Chrome и Firefox, но то же самое не работает в Internet Explorer. В IE форма выравнивается по центру по горизонтали, но не по вертикали. Что не так и что можно сделать, чтобы он правильно выровнялся и в IE?


web forms html css
person Selvam    schedule 26.04.2017    source источник
comment
Стиль должен быть внутри головного раздела   -  person Alexis    schedule 26.04.2017
comment
Почему стиль должен быть внутри раздела заголовка?   -  person Selvam    schedule 26.04.2017
comment
Поскольку это соглашение HTML w3schools.com/html/html_css.asp   -  person Alexis    schedule 26.04.2017
comment
Хорошо, я включил его в раздел head. Тем не менее, css, кажется, не применяется должным образом в IE? так что есть предложения?   -  person Selvam    schedule 26.04.2017
comment
flex имеет лишь частичную поддержку в IE; он поддерживает старый синтаксис в ie10, а в ie11 поддерживается только частично из-за большого количества ошибок. См. caniuse .com/#search=flex Это наиболее вероятная причина вашей проблемы.   -  person Rachel Gallen    schedule 26.04.2017
comment
Удалите IE.. :D   -  person Vaibhav    schedule 29.04.2017
comment
vaibhav haha.....моя команда хотела, чтобы я исправил это и в IE; в любом случае, теперь я исправил это; благодаря Рэйчел Галлен и Кимманон :)   -  person Selvam    schedule 29.04.2017

Ответы (1)


arrow_upward
1
arrow_downward

Вышеупомянутая проблема связана с тем, что IE лишь частично поддерживает flex.

Включая align-items: center; после display: flex;

заставил css правильно применяться в IE.

Спасибо Рэйчел Галлен за то, что она указала мне на проблему с поддержкой гибкости в IE.

Ссылка: https://stackoverflow.com/a/17156937/5293838

Решение предоставлено cimanon:

Вам нужно очень внимательно прочитать заметки на caniuse. «Частичная поддержка» относится к поддержке одного из двух старых проектов, и они не отмечают, какой браузер поддерживает какой проект. IE10 поддерживает проект от марта 2012 года, и это единственный известный способ.

http://codepen.io/cimmanon/pen/ApHEy

 .box {
       display: -webkit-box;
       display: -moz-box;
       display: -ms-flexbox;
       display: -webkit-flex;
       display: flex;
       -webkit-box-pack: center;
       -moz-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
       -moz-box-align: center;
      -ms-flex-align: center;
       -webkit-align-items: center;
       align-items: center;
       /* fix for old FF */
       width: 100%;
     }
person Selvam    schedule 26.04.2017
comment
Спасибо, что упомянули меня за указание на проблему, но заслуга также принадлежит cimmanon [stackoverflow.com/users/1652962/cimmanon] , пользователь, написавший ответ, на который вы ссылаетесь. Хороший звонок, включая ссылку на ответ, но еще лучше вставить цитируемую копию ответа со ссылкой - person Rachel Gallen; 28.04.2017
comment
спасибо, и да, я также включу процитированную копию ответа :) - person Selvam; 29.04.2017