Я пробовал:IE7, поддержка IE8 для CSS3 медиа запросов
@media screen and (max-width:1024px) {
.sidebar{width:630px;}
}
получить исправление для IE7 и 8, но он не работает, где, как он работает для IE9 и других браузеров. Есть ли другой способ написать это. Я попытался включить jss css3mediaqueries, но не удался. Есть ли какая-либо поддержка для IE7 и IE8?
Насколько мне известно, я думаю, что медиа-запросы не поддерживаются для IE7 и IE8.
См here
Просто наткнулся на эту тему, может быть обходной путь для этого.
Оригинал сообщение здесь: IE8 support for CSS Media Query
Я не пробовал CSS3-mediaqueries.js! Возможно, вы дадите respond.js. Это действительно работает для IE 6-8, который изначально не поддерживает Медиа-запросы (см. Can I use ...).
В любом случае, почему вы все еще поддерживаете IE 7 в настоящее время? Каждая система, все еще работающая с IE 7, может быть обновлена до IE 8. Кроме того, резервное копирование современных элементов CSS3, таких как Flexbox, намного упрощает поддержку IE 8 для «display: table-xy» (который не поддерживается IE 7).
Лично я не использую Shims/Polyfills для основной компоновки, потому что, на мой взгляд, контрпродуктивно сделать макет CSS в зависимости от поддержки Javascript.
Включите этот метатег в головке < >.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Internet Explorer 8 или старше не поддерживает мультимедийный запрос. Вы можете использовать media-queries.js или reply.js для добавления поддержки медиа-запросов в IE.
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
Я думаю, что эти две ссылки помогут вам.
Обновление
CSS3-mediaqueries-JS перемещается на github
В общем, шаги по разрешению представляют собой комбинацию плагинов JS , условные комментарии и тестовую среду.
Я успешно использовал response.js для поддержки медиа-запросов, вы можете скачать его из github. - использовать условные комментарии, чтобы избежать добавления этого в современных браузерах
<!--[if lt IE9]>
<script src="..directory-path/respond.js">
<![endif]-->
В зависимости от того, насколько подробно вы хотите получить с поддержкой CSS3, вы можете настроить PIE.htc - css3pie.ком
Наконец, для того, чтобы получить лучшее представление о проблемах и результатах, смотрите в браузере параметры тестирования:
Настройка виртуальной машины - https://modern.ie/en-us/virtualization-tools#downloads - Это был очень удачный способ для меня, и я считаю, это самый надежный метод
Browserstack - вы можете настроить пробную учетную запись на 30 дней; это хороший инструмент, но, как и прежде, он не так надежен, как виртуальная машина.
<!DOCTYPE html>
<html>
<head>
<title>New Page 1</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<style>
body {
background-color: #FFF;
color: #000;
font: 1.1em/2.0em Arial, Helvetica, sans-serif;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#outer {
border: 1px solid red;
margin: 1% auto;
padding: 10px;
max-width: 1000px;
min-width: 310px;
text-align: center;
}
.box {
border: 1px solid green;
display: inline-block;
float: left;
padding: 1%;
text-align: left;
width: 310px;
0
}
.clear {
clear: both;
}
@media screen and (max-width: 1030px) {
#outer {
width: 660px;
}
}
@media screen and (max-width: 550px) {
#outer {
width: 320px;
}
}
</style>
<!-- [if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div id="outer">
<div class="box">
<p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
</div>
<div class="box">
<p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
</div>
<div class="box">
<p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
</div>
<div class="box">
<p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
</div>
<div class="box">
<p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
</div>
<div class="box">
<p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
</div>
<div class="box">
<p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
</div>
<div class="box">
<p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
</div>
<div class="box">
<p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
</div>
<div class="box">
<p>sdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdfsdf sdf sdfsdf sdf</p>
</div>
<div class="clear"></div>
</div>
<!-- outer -->
</body>
</html>ВАЖНЫЕ ПУНКТЫ ДЛЯ ВЫШЕГО РАБОТЫ :: –
с должным respect- даже respond.js не работает тоже. Моя охота за исправлением продолжается. – guyan
Где и как вы загружаете/интегрируете стили CSS и скрипт response.js в свой HTML-документ? И вы убедились, что стиль внутри Media Query не перезаписан другим стилем? – Netsurfer
Я пишу, как:
– guyan