具有绝对内部相对定位和溢出的可伸缩形式在IE中不起作用

时间:2013-05-18 03:16:51

标签: html css internet-explorer css3 css-float

我正在制作一个电子邮件选择器表单,它需要能够扩展到容器的大小,并且还可以容纳“to”选择器,随着选择更多地址而增加。我有一个在Firefox和Chrome中运行良好的解决方案,但在IE9& IE10。

以下是我正在尝试做的事情的说明: enter image description here

问题的核心是DIV必须是“position:absolute”才能使“overflow-y:auto”工作,并且要在流程中定位,它需要一个“position:relative”的父级。我正在使用桌子以便在两个方向上正确地伸展尺寸,但是对于任何能够在不使用桌子的情况下正确拉伸的人来说,奖励积分。

我把问题归结为一个最小的例子: http://jsfiddle.net/yh7YD/4/

这是HTML:

<div class="outer">
    <table border="1">
        <tr class="first-row">
            <td class="to-label">To:</td>
            <td class="input-wrapper">
                <textarea></textarea>
            </td>
        </tr>
        <tr class="results-row">
            <td colspan="2" class="results-wrapper">
                <div class="results">
                    <ul>
                        <li>one</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                        <li>two</li>
                    </ul>
                </div>
            </td>
        </tr>
    </table>
</div>

使用这个CSS:

.outer {
    position: absolute;
    top: 50px;
    left: 50px;
    right: 50px;
    bottom:50px;
}
.first-row {
    height:10px;
}
.results-wrapper {
    position:relative;
}
table {
    width: 100%;
    height:100%;
}
.results {
    position:absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow-y: scroll;
}

1 个答案:

答案 0 :(得分:0)

尝试使用reset.csshtml5shiv.js。谈到IE,这两个对我的工作有很大的帮助。希望这会对你有所帮助。