小编Luk*_*uke的帖子

我正在研究绝对定位的CSS格式<input>.我想它"拉伸"的容器内(也位于"绝对"),这样它留下例如30像素左,右,填补内的所有空间...

我已经在w3.org网站上找到了一个样本,它使用左右两种方法在CSS中创建一种"框架集".

我也看了,从A-List的除了一篇文章谈论这种技术,发现其他几个问题,在这里处理类似的麻烦,但这些都不注重我要描述的具体问题.我还发现,我可以包装内<input>有<div>,但我想挖多一点关于这个问题的理解,为什么它是行为不端...

这是我用来测试和澄清这个想法的工作样本.简而言之,它就像这样简单:

<div id="sidebar">
  <input type="text" value="input" />
</div>

这样的风格:

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>位置以所述方式？

希望有人对此有所了解. …