鍍金池/ 問答/HTML/ IE9下absolute定位,bottom不起作用

IE9下absolute定位,bottom不起作用

在IE8、chrome、Firefox下顯示為:

clipboard.png

但是在IE9下顯示有所不同:(必須是IE9,如果是IE10控制臺轉(zhuǎn)到IE9內(nèi)核,會顯示正常)

clipboard.png

這是什么原因造成的?有什么好的解決辦法?

下面是完整代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        td{
            position: relative;
            width:120px;
        }
        .span{
            position: absolute;
            top:0;
            bottom:0;
            display: inline-block;
            left:0;
            right:0;
            background-color: red;
        }
    </style>
</head>
<body>

<table>
    <tbody>
    <tr>
        <td><span class="span"></span></td>
        <td>這是一個(gè)td</td>
    </tr>
    </tbody>
</table>
</body>
</html>
回答
編輯回答
情未了

&nbsp;

2018年6月25日 14:00
編輯回答
傻叼

因?yàn)槟愕膖d沒有高度

2018年2月20日 18:35
編輯回答
雅痞

應(yīng)該是不支持用top、bottom、left、right自動(dòng)撐滿父級

2017年9月10日 09:29
編輯回答
命于你

我覺得ie9在top和bottom同時(shí)存在的情況下bottom不會生效,所以如果想實(shí)現(xiàn)撐滿父級的話,可以使用margin-bottom: -500px; top: 0;然后td設(shè)置 overflow:hidden;來達(dá)到子節(jié)點(diǎn)填充父級的目的

2018年4月22日 20:48
編輯回答
孤星

把display:inline-block改成display:block試試,完全不明白你這么寫有什么意義

2017年10月22日 10:46
編輯回答
朕略萌

撐滿父級方式不對,top right bottom left解析異常,可以更改為寬高100% display:block即可

2018年7月28日 16:49