에 대한 IE8 지원이 나는 시도했다 :IE7, CSS3 미디어 쿼리
@media screen and (max-width:1024px) {
.sidebar{width:630px;}
}
는 IE7과 8 있지만 그것은 IE9와 기타 브라우저에서 작동하기 때문에, 여기서 작동하지에 대한 수정을 얻을 수 있습니다. 이것을 작성하는 다른 방법이 있습니까? 나는 css3mediaqueries js를 포함 시키려고했지만 성공하지는 못했다. IE7 및 IE8에 대한 지원이 있습니까?
내 지식으로는 미디어 쿼리가 IE7과 IE8에서 지원되지 않는다고 생각합니다.
이것에 대한 해결 방법이있을 수있다,
here 그냥이 스레드를 건너 왔어요을 참조하십시오. 여기
원래의 게시물 : IE8 support for CSS Media Query
은 내가 CSS3 - mediaqueries.js을 시도하지 않은! 어쩌면 respond.js을 시도해보십시오. 이는 기본적으로 이 미디어 쿼리 (Can I use ... 참조)를 지원하지 않는 IE 6-8에서 실제로 작동합니다.
어쨋거나 요즘 IE 7을 여전히 지원하는 이유는 무엇입니까? 여전히 IE 7을 실행하는 각 시스템은 IE 8로 업데이트 될 수 있습니다. 또한 Flexbox와 같은 최신 CSS3 레이아웃 기능의 대체 기능은 'display : table-xy'(Internet Explorer 7에서 지원되지 않는 IE 8 지원)).
개인적으로 나는 CSS 레이아웃을 자바 스크립트 지원에 의존하게 만드는 것이 비현실적이기 때문에 개인적으로 기본 레이아웃에 어떤 Shims/Polyfills도 사용하지 않습니다.
< 머리 >에이 메타 태그를 포함하십시오.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Internet Explorer 8 이상은 미디어 쿼리를 지원하지 않습니다. media-queries.js 또는 respond.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 플러그인의 조합 조건부 주석 및 테스트 환경을 제공합니다.
media 쿼리 지원에 respond.js를 사용 했으므로 github에서 다운로드 할 수 있습니다. - 당신은 CSS3를 지원하여 얻는 방법을 상세에 따라 최신 브라우저
<!--[if lt IE9]>
<script src="..directory-path/respond.js">
<![endif]-->
이 추가 피하기 위해 조건부 주석을 사용하여, 당신은 PIE.htc을 설정할 수 있습니다 - css3pie합니다.COM
는마지막으로, 브라우저 테스트 옵션을 조사, 문제와 결과에 대한 더 나은 이해를 얻기 위해 : VM을 설정
- https://modern.ie/en-us/virtualization-tools#downloads 을 -이 나를 위해 매우 성공적인 방법이었다 내가 생각 가장 신뢰할 수있는 방법
Browserstack - 30 일 동안 평가판 계정을 설정할 수 있습니다. 그것은 좋은 툴이지만 이전처럼 VM만큼 신뢰할 수는 없습니다. 심지어 respond.js를 respect-하는 것은 너무 작동하지 않는 때문에와
<!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>위의 중요한 포인트 :: –
. 수정 사냥을 계속합니다. – guyan
CSS 스타일 시트 과 HTML 문서의 respond.js 스크립트를 어디서 어떻게 통합하고 통합합니까? 그리고 미디어 쿼리의 스타일을 다른 스타일로 덮어 쓰지 않았는지 확인 했습니까? – Netsurfer
내가 같이 쓰고있다 : <스크립트 SRC = "rspond.js">
– guyan