html - Internet Explorer 中的顶部定位错误

Question

我有一个基于 div 的设计。当我在 IE 中测试它时，我看起来很奇怪。

浏览器

Chrome

例如，我使用下面的这些代码来定位黄色的大 div:

#wrapper
{
    top:10%;
    margin:0 auto;
    position:relative;
    width:200px;
    height:200px;
}

它里面的 div 有这个 css 属性:

#rounded
{
    box-sizing:border-box;
    opacity:0.4;
    background-color:yellow;
    width:200px;
    height:200px;
    border-radius:100%;
    position:absolute;
    top:0; bottom:0; left:0; right:0;
    margin:auto;
    /* I have also some border animation codes. But I think those are irrelevant. So I deleted them from here */
}

什么会导致这种情况？以下是完整代码:

@font-face{ 
    font-family: 'Swiss';
    src: url('../font/swis.eot');
    src: url('../font/swis.eot?#iefix') format('embedded-opentype'),
         url('../font/swis.woff') format('woff'),
         url('../font/swis.ttf') format('truetype'),
         url('../font/swis.svg#webfont') format('svg');
}
.hrlike1 {
    border: 0;
    height: 1px;
    width:400px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    left:0; right:0;
    margin:0 auto;
    opacity:0.5;
    position:relative;
    width:400px;
    top:15%;
}
.hrlike2 {
    border: 0;
    height: 1px;
    opacity:0.5;
    width:400px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    left:0; right:0;
    margin:0 auto;
    position:relative;
    width:400px;
    top:25%;
}
body{
    font-family:Swiss;
    font-size:1.5em;
    margin:0;
    padding:0;
}
#headerlogo:hover
{
      border-color:purple;
    border-width:1px;
    border-style:dashed;
    cursor:pointer; 
}
.item1c
{
    visibility:hidden;
    background-color:hotpink;
    color:black;
    text-align:center;
    position:absolute;
    top:0; bottom:0; left:0; right:0;
    margin:auto;
    width:50%;
}
#headerlogo
{
    left:0;
    right:0;
    top:0; 
    bottom:0;
    border-spacing:2px;
    margin:auto;
    width:44px;
    height:44px;
    position:absolute;
    border-radius:100%;
    background:url("../../img/altlogo.png") no-repeat center;
    background-size:contain;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 30px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 30px 0px rgba(50, 50, 50, 0.75);
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
    box-sizing:border-box;


}
#header
{
    visibility:hidden;
    opacity:0.5;
    width:100%;
    height:50px;
    background-color:hotpink;
    border-bottom:1px solid pink;
    position:fixed;
}
#headercontent 
{

    border-left:1px solid pink;
    border-right:1px solid pink;
    width:50%;
    height:100%;
    left:0; right:0;
    margin:auto;
    background-color:red;

}

#rounded
{

    -webkit-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 30px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 30px 0px rgba(50, 50, 50, 0.75);
    border-width:100px;
    border-color:transparent;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
    box-sizing:border-box;
    opacity:0.4;
    background-color:yellow;
    border-style:solid;
    width:200px;
    height:200px;
    border-radius:100%;
    position:absolute;
    top:0; bottom:0; left:0; right:0;
    margin:auto;
}
#wrapper
{
    top:10%;
    margin:0 auto;
    position:relative;
    width:200px;
    height:200px;
}
.item1
{
    width:200px;
    height:100%;
    float:left;
    margin-left:7%;
}
.item2
{
    width:200px;
    height:100%;
    float:left;
    margin-left:3%;
}
#schools div
{
    position:relative;
}
.itemcontent:hover{
    border-color:midnightblue;
    border-width:0px;
    cursor:pointer;  
    width:200px;
    height:200px;
}
.itemcontent:hover .item1c{
    visibility:visible;
}
.itemcontent
{
    width:150px;
    height:150px;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 30px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 30px 0px rgba(50, 50, 50, 0.75);
    border-width:75px;
    border-color:transparent;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
    box-sizing:border-box;
    border-radius:100%;
    border-style:solid;
    position:absolute;
    top:0; bottom:0; left:0; right:0;
    margin:auto;
}
#schools
{
    width:1000px;
    height:200px;
    position:relative;
    top:20%;
    left:0;
    right:0;
    margin:auto;

}
#anaokulu{background-image:url('../../img/anaokulu/1.jpg'); background-position:center; background-repeat:no-repeat; }
#ilkokul{background-image:url('../../img/anaokulu/2.jpg'); background-position:center; background-repeat:no-repeat;}
#ortaokul{background-image:url('../../img/anaokulu/3.jpg'); background-position:center; background-repeat:no-repeat; }
#lise{ background:url('../../img/anaokulu/4.jpg'); background-position:center; background-repeat:no-repeat; }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>Title1</title>
    <link href="Art/css/theme.css" rel="stylesheet" />
    <link href="jui/jquery-ui.css" rel="stylesheet" />
    <link href="jui/jquery-ui.structure.css" rel="stylesheet" />
    <link href="jui/jquery-ui.theme.css" rel="stylesheet" />
    <script src="jui/jquery-1.11.1.js"></script>
    <script src="jui/jquery-ui.js"></script>
</head>
<body>
    <div id="header">
         <div id="headercontent">
             <div id="headerlogo"></div>
         </div>
    </div>
    <div id="wrapper">
        <div id="rounded"></div>
    </div>
    <div class="hrlike1"></div>
    <div id="schools">
        <div class="item1">
            <div id="anaokulu" class="itemcontent">
                <div class="item1c">Anaokulu</div>
            </div>
        </div>
        <div class="item2">
            <div id="ilkokul" class="itemcontent">
                <div class="item1c">İlkokul</div>
            </div>
        </div>
        <div class="item2">
            <div id="ortaokul" class="itemcontent">
                <div class="item1c">Ortaokul</div>
            </div>
        </div>
        <div class="item2">
            <div id="lise" class="itemcontent">
                <div class="item1c">Lise</div>
            </div>
        </div>
    </div>
    <div class="hrlike2"></div>
    <div id="footer"></div>
</body>
</html>

Answer 1

我在处理这个问题有一段时间了。最后，我找到了解决方案。

标签根据不同的浏览器渲染调整大小。所以在 Internet explorer 和 chrome 中，它们为我们的标签提供了不同的尺寸。所以我基于百分比的位置代码(例如:top:%10；top:%12；等等)不起作用。然后我将文档中的所有内容都放在一个 id 为 big_wrapper 的 div 中。然后我将浏览器的大小提供给 big_wrapper。(当然是使用 jquery)从那时起，基于百分比的位置代码就非常有效。这是我的代码示例。

html 端

<body onresize="recalibrate()">

Java 端

<script>
        $(document).ready(function () {
            recalibrate();

        });
       function recalibrate() {
            $("#big_wrapper").css("width", $(window).width());

            $("#big_wrapper").css("height", $(window).height());


        }
    </script>

感谢阅读..