位置：Internet Explorer中的绝对错位div

Question

位置：绝对用于div在Internet Explorer中错位div。但在Mozilla Firefox和Chrome中运行良好。有人可以建议解决方法吗？

代码

http://jsbin.com/uxerus/15/edit

Answer 1

解决方案是将第一个输入和隐藏的div包装在另一个div中，将“包装器”position设置为relative。然后定位隐藏的div absolute，包括left和top css属性。

首先，请参阅http://jsbin.com/uxerus/56/edit

应该是这样的：

的CSS：

.wrapper {
    position: relative;
}

div.first {
    position: absolute;
    top: 24px;
    left: 0;
    z-index: 10;
    width: 298px;
    border: 1px solid #000;
    background: #fff;
}

HTML：

<div class="wrapper">
    <input type="text" id="input" name="input" value="First div" />
    <div id="content" class="first">
        <span>option 1</span>
        <span>option 2</span>
        <span>option 3</span>
        <span>option 4</span>
    </div>
</div>