具有绝对定位宽度的突发跨浏览器异常

Question

请考虑以下代码：

<div>
    <input type='text' />
</div>

...

div {
    width:300px;
    background:#DDD;
    position:relative;
    height:100px;
}
input {
    position:absolute;
    left:20px;
    right:20px;
    top:10px;
    bottom:10px;
    display:block;
}

几个月前，这可以相当可靠地产生这样的东西：

现在，最新版本的Chrome＆amp; IE：http://jsfiddle.net/eY5uj/1/

但是，对于许多其他元素，例如<p>，此方法仍可正常使用跨浏览器：

http://jsfiddle.net/eY5uj/2/

2个问题：

1. 这里发生了什么？

2. 是否有解决方法（删除position:absolute并在父div上设置填充？）