如何使主页响应

Question

我是CSS的新手，我想为移动IE制作响应式设计。现在＆＃34;它显示为空白页面＆＃34;，但它在Google Chrome和其他浏览器中运行良好： - ）

以下是我使用的代码

HTML：

<div class="main">
    <div class="container">
        <div class="marquee">
            <marquee scrollamount="3" direction="right" dir="ltr">
                 <h3 align="center" style="color:#804000;font-size:large;margin-top:0px;"><strong>  
    <img height="37" src="http://www.ghadaalsamman.com/new/images/image21.png">
        </strong></h3>

            </marquee>
        </div>
<a class="button" id="btn1" href="http://ghadaalsamman.com/new/site.html"></a>

    </div>
</div>

CSS：

html {
    height: 100%;
    width: 100%;
}
body {
    background-image: url("http://www.ghadaalsamman.com/new/images/bg.gif");
    background-repeat: no-repeat;
    background-position: center center;
    height: 100%;
    margin: 0;
}
.marquee {
    display: block;
    position: absolute;
    top: 43%;
    width: 100%;
}
#btn1 {
    background-image: url("http://www.ghadaalsamman.com/new/images/enter.gif");
    background-repeat: no-repeat;
    background-position: center center;
    bottom: 10px;
    display: block;
    height: 53px;
    margin: 0 auto;
    position: absolute;
    width: 100%;
}
.button {
    padding: 5px;
}
.container {
    display: block;
    height: 100%;
    margin: 0 auto;
    max-width: 960px;
    position: relative;
}
.main {
    height: 100%;
    padding: 0 20px;
}
@media screen and (max-width:500px) {
    #btn1{
        background-size: 100% auto;
    }
}

jsfiddle

Desktop View

提前致谢

Answer 1

在Windows Phone 8.1上为我工作

我认为在响应方面存在问题，我在桌面上检查了在IE上以及在Windows Phone上调整浏览器的大小。