Question

IE8中的响应能力不起作用。我试过了两个respond.js＆amp; CSS3-mediaqueries.js。它还没有工作。以下是我的代码。

HTML

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>CDT - Dashboard</title>
<link rel='stylesheet' href='../Styles/Style.css' type='text/css' media='screen' />
<!--[if lt IE 9]>
<script src='../Scripts/html5shiv-printshiv.js'></script>
<script src='../Scripts/css3-mediaqueries.js'></script>
<![endif]-->

</head>
<body>
<div class='wrapper'>
<header>
<nav>
<ul>
<li><a href='#' title=''>Home</a></li>
<li><a href='#' title=''>Link2</a></li>
<li><a href='#' title=''>Link3</a></li>
</ul>
</nav>
</header>
<section>
<div class='wrapper-heding'>Welcome Message</div>
<img src='../Images/banner_half.png' class='banner' alt='Banner' />
<div class='home-page-desc'>Welcome</div>
</section>
</div>
</body>
</html>

感谢。

下面是我的Style.css文件。在IE8的情况下，我得到了一个地平线卷轴。我的意思是它不响应。媒体查询也不起作用。

CSS

body 
{
    background-color: #ccc;
    font-family: Calibri, Arial, 'Trebuchet MS';
    padding: 0 0;
    margin: 0 0;
    font-size: 16px;
}

.wrapper {
    width: 1280px;
    margin: 0 auto;
    border: 1px solid #ccc;
    background-color: #fff;
}

nav {
    width: 100%;
    /*position: fixed;*/
}

nav ul {
    background-color: rgb(64,131,238);
    height: 40px;
    width: 100%;
    padding: 0 0;
    margin: 0 0;
}

nav ul li {
    list-style-type: none;
    float: left;
}

nav ul li a 
{
    font-size: 1.125em; /* 18px/16px=1.125em */
    text-decoration: none;    
    line-height: 40px;
    height: 40px;
    color: #fff;
    padding-right: 20px;
    padding-left: 20px;
    display: inline-block;
}.banner {
    width: 100%;
    height: auto;
}

.wrapper-heding {
    font-size: 1.25em; /* 20px/16px=1.25em */
    color: #6182B3;
}
@media screen and (max-width: 1280px){
    .wrapper {
        width: 100%;
    }
}
@media screen and (max-width: 480px){
    body {
        width: 100%;
        background-color: red;
    }
}

媒体查询响应能力在IE8中无效

0 个答案: