使用左右CSS属性绝对定位INPUT时的奇怪行为

Question

我正在研究绝对定位的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>位置以所述方式？

希望有人对此有所了解.

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

Answer 1

意见

我对这种行为感到惊讶.右上 - 左下绝对定位非常有效(并且有多年)但它被IE 10和FF忽略了input type="text"

Red herring:您的方法确实可以使用,input type="range"但不适input type="number"用于IE 10.也许这与浏览器对绘图负全部责任的输入相关,而不是那些可能包含操作系统已经提供的功能的输入.

在FF(PC/Mac)中,我观察到size输入的属性似乎覆盖了除显式宽度赋值之外的任何内容.例如,设置size=4将使输入比期望的更窄.观察到的宽度似乎是隐含size=20值的结果.

解决方法

总而言之,我确实有一个潜在的解决方案,不需要对您的代码进行大量更改,适用于IE9/10,FF(PC/Mac),Chrome(PC/Mac)和Safari(Mac).

演示: http ://jsfiddle.net/ws9hf/13/

#sidebar .x {
    position: absolute;
    box-sizing: border-box;
    width: -webkit-calc(100% - 60px);
    width: calc(100% - 60px);
    left: 30px;
    right: 30px; /* fallback */
}

这使用了具有良好浏览器支持的cacl()函数.值得注意的是,W3将此功能视为"存在风险",因此其未来可能不确定.

作为"酷"的calc()功能是实用的 - 我可能会将有问题的输入包装在另一个元素中并完成它.您将获得更广泛的浏览器支持和未来的兼容性.