Дисплей: flex не поддерживается в IE8

У меня проблема с отображением в IE8 browser, так как он отображает мой блок в целой строке. Он должен плавать, как и в Chrome browser. Что нужно сделать, чтобы работать в IE8.Дисплей: flex не поддерживается в IE8

Вот мой код: ` IE

</head> 

    <body> 

    <div class="grid"> 
     <div class="item"> 
     <h3>Item</h3> 
     </div> 
     <div class="item"> 
     <h3>Item</h3> 
     </div> 
     <div class="item"> 
     <h3>Item</h3> 
     </div> 
     <div class="item"> 
     <h3>Item</h3> 
     </div> 
     <div class="item"> 
     <h3>Item</h3> 
     </div> 
     <div class="item"> 
     <h3>Item</h3> 
     </div> 
     <div class="item"> 
     <h3>Item</h3> 
     </div> 
     <div class="item"> 
     <h3>Item</h3> 
     </div> 
     <div class="item"> 
     <h3>Item</h3> 
     </div> 
     <div class="item"> 
     <h3>Item</h3> 
     </div> 
    </div> 

    </body> 
    </html> 

    `

и CSS часть`

 *, *:before, *:after { 
     box-sizing: border-box; 
    } 

    html, body { 
     width: 100%; 
     height: 100%; 
     font-family: Helvetica; 
    } 

    body { 
     display: -webkit-box; 
     display: -webkit-flex; 
     display: -ms-flexbox; 
     display: flex; 
     -webkit-box-pack: center; 
     -webkit-justify-content: center; 
      -ms-flex-pack: center; 
       justify-content: center; 
     -webkit-box-align: center; 
     -webkit-align-items: center; 
      -ms-flex-align: center; 
       align-items: center; 
    } 

    img { 
     max-width: 100%; 
     height: auto; 
    } 

    .grid { 
     width: 1024px; 
     display: -webkit-box; 
     display: -webkit-flex; 
     display: -ms-flexbox; 
     display: flex; 
     -webkit-flex-flow: row wrap; 
      -ms-flex-flow: row wrap; 
       flex-flow: row wrap; 
     padding: 32px; 
     background-color: #ddd; 
    } 
    .grid:after { 
     content: ""; 
     -webkit-box-flex: 1; 
     -webkit-flex: auto; 
      -ms-flex: auto; 
       flex: auto; 
     margin-left: -1%; 
    } 
    .grid .item { 
     -webkit-box-flex: 1; 
     -webkit-flex: 1 0 24.25%; 
      -ms-flex: 1 0 24.25%; 
       flex: 1 0 24.25%; 
     max-width: 24.25%; 
     margin-bottom: 10px; 
     text-align: center; 
     background-color: #bbb; 
    } 
    .grid .item:nth-child(4n+2), .grid .item:nth-child(4n+3), .grid 
    .item:nth-child(4n+4) { 
     margin-left: 1%; 
    } 
    .grid .item:nth-child(4n+1):nth-last-child(-n+4), .grid .item:nth- 

    child(4n+1):nth-last-child(-n+4) ~ .item { 
     margin-bottom: 0; 
    } 
    `

источник

2016-06-30 Narayanan

Flex был впервые введен несколько лет ** ** после IE8 был освобожден. Конечно, это не поддерживает. –

вы можете поплавать пользователем – Afsar

Я пробовал использовать float: left; но с IE нет никаких изменений. – Narayanan

Я бывает becuase, т.е.-8 не поддерживает прогибается свойство, но без проблем у нас есть исправление для этого.

Прежде всего использовать т.е. конкретную таблицу стилей как,

<!--[if lte IE 9]> 
    <link rel="stylesheet" type="text/css" href="path to file/ie.css" /> 
<![endif]-->

затем включить followsing CSS в этом ie.css файл,

.grid { 
    display:block; 
    margin-left:auto; 
    margin-right:auto; 
} 

.grid .item { 
    float:left; 
    width: 24.25%; 
} 

.clearfix:before, 
.clearfix:after { 
    content: " "; 
    display: table; 
} 

.clearfix:after { 
    clear: both; 
}

Убедитесь, что добавить DIV с классом ». clearfix 'после последнего' пункта», как

<div class="grid"> 
    <div class="item"> 
    <h3>Item</h3> 
    </div> 
    <div class="item"> 
    <h3>Item</h3> 
    </div> 
    <div class="item"> 
    <h3>Item</h3> 
    </div> 
    <div class="item"> 
    <h3>Item</h3> 
    </div> 
    <div class="item"> 
    <h3>Item</h3> 
    </div> 
    <div class="item"> 
    <h3>Item</h3> 
    </div> 
    <div class="item"> 
    <h3>Item</h3> 
    </div> 
    <div class="item"> 
    <h3>Item</h3> 
    </div> 
    <div class="item"> 
    <h3>Item</h3> 
    </div> 
    <div class="item"> 
    <h3>Item</h3> 
    </div> 

    <div class="clearfix"></div> 

</div>

И это будет работать на т.е. также.

Ваш полный HTML страница будет выглядеть следующим образом,

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<style type="text/css"> 
*, *:before, *:after { 
     box-sizing: border-box; 
    } 

    html, body { 
     width: 100%; 
     height: 100%; 
     font-family: Helvetica; 
    } 

    body { 
     display: -webkit-box; 
     display: -webkit-flex; 
     display: -ms-flexbox; 
     display: flex; 
     -webkit-box-pack: center; 
     -webkit-justify-content: center; 
      -ms-flex-pack: center; 
       justify-content: center; 
     -webkit-box-align: center; 
     -webkit-align-items: center; 
      -ms-flex-align: center; 
       align-items: center; 
    } 

    img { 
     max-width: 100%; 
     height: auto; 
    } 

    .grid { 
     width: 1024px; 
     display: -webkit-box; 
     display: -webkit-flex; 
     display: -ms-flexbox; 
     display: flex; 
     -webkit-flex-flow: row wrap; 
      -ms-flex-flow: row wrap; 
       flex-flow: row wrap; 
     padding: 32px; 
     background-color: #ddd; 
    } 
    .grid:after { 
     content: ""; 
     -webkit-box-flex: 1; 
     -webkit-flex: auto; 
      -ms-flex: auto; 
       flex: auto; 
     margin-left: -1%; 
    } 
    .grid .item { 
     -webkit-box-flex: 1; 
     -webkit-flex: 1 0 24.25%; 
      -ms-flex: 1 0 24.25%; 
       flex: 1 0 24.25%; 
     max-width: 24.25%; 
     margin-bottom: 10px; 
     text-align: center; 
     background-color: #bbb; 
    } 
    .grid .item:nth-child(4n+2), .grid .item:nth-child(4n+3), .grid 
    .item:nth-child(4n+4) { 
     margin-left: 1%; 
    } 
    .grid .item:nth-child(4n+1):nth-last-child(-n+4), .grid .item:nth- 

    child(4n+1):nth-last-child(-n+4) ~ .item { 
     margin-bottom: 0; 
    } 
</style> 

<!--[if lte IE 9]> 
    <link rel="stylesheet" type="text/css" href="ie.css" /> 
<![endif]--> 
</head> 



<body> 

<div class="grid"> 
     <div class="item"> 
     <h3>Item</h3> 
     </div> 
     <div class="item"> 
     <h3>Item</h3> 
     </div> 
     <div class="item"> 
     <h3>Item</h3> 
     </div> 
     <div class="item"> 
     <h3>Item</h3> 
     </div> 
     <div class="item"> 
     <h3>Item</h3> 
     </div> 
     <div class="item"> 
     <h3>Item</h3> 
     </div> 
     <div class="item"> 
     <h3>Item</h3> 
     </div> 
     <div class="item"> 
     <h3>Item</h3> 
     </div> 
     <div class="item"> 
     <h3>Item</h3> 
     </div> 
     <div class="item"> 
     <h3>Item</h3> 
     </div> 

     <div class="clearfix"></div> 

    </div> 
</body> 
</html>

источник

2016-06-30 06:02:39

Я попытался добавить ie.css чуть выше моего style.css. Я также добавил clearfix после последнего элемента, но у моего IE, похоже, возникают проблемы с ним. Я внес изменения вместе с моими предыдущими изменениями, включая float: left и * display: inline. – Narayanan

добавьте ie.css ниже style.css с использованием точных стилей, о которых я упомянул. Это не обязательно, но сохраняйте стиль style.css и ie.css таким же, чтобы не было никакой путаницы. –

Да, я изменил порядок таблиц стилей. Тем не менее, то, что я вижу в IE, у них нет полей между элементами, но если я вручную устанавливаю margin в .grid .item {}, под ie.css, это влияет на макет в Chrome. Где мне нужно изменить точно, чтобы сделать вещи аккуратными? – Narayanan

Дисплей: flex не поддерживается в IE8

ответ

Смежные вопросы