html input不占位置,html – 使用左右CSS属性绝对定位INPUT时的奇怪行为

我正在研究绝对定位的< input>的CSS格式.

我希望它能够在它的容器内“拉伸”(它也是“绝对的”),这样它就可以向左和向右留下30px,并填充所有空间……

我已经找到了一个sample on w3.org site,它使用左右两种方法在CSS中创建一种“框架集”.

我还阅读了an article from A-List-Apart,讨论了这种技术,并在此处发现了其他一些类似问题的问题,但这些都没有针对我要描述的具体问题.我还发现我可以包装内部< input>使用< div>,但我想更多地了解这个主题,以了解为什么它行为不端……

这是a working sample我做的测试和澄清的想法.

简而言之,它就像这样简单：

这样的风格：

body { height: 100% } /* Required for percentage heights below */

#sidebar {

position: absolute;

top: 0;

height: 100%;

left: 0;

width: 160px;

}

#sidebar input {

position: absolute;

margin: 0;

padding: 0;

height: 21px;

left: 30px;

right: 30px;

width: auto;

}

有趣的一点是在最后三行,当我向左和向右设置并将宽度保持为“自动”时.

结果是它只能按预期使用Chrome(第26版),但在FF.20或IE.10中看起来很糟糕：< input>延伸超出其容器div的右边距..与放置宽度时相同：100％并且只有设置离开位置…

有趣的是,这种使用DIV和内联块SPAN的方法在所有三种浏览器中都能正常工作.

这是浏览器方面的错误吗？有没有办法让它工作,没有解决方法括起来< input>宽度：100％在另一个< div>内以描述的方式定位？

希望有人对此有所了解.

PS：我专注于“现代”的html5浏览器,所以我不介意它是否适用于IE8或更旧版本.