Question

我正在研究绝对定位的<input>的CSS格式。我希望它能够在它的容器内“拉伸”（它也是“绝对的”），这样它就可以向左和向右留下30px，并填充所有空间......

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

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

这是a working sample我做的测试和澄清这个想法。简而言之，它就像这样简单：

<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>的{{1}}括在另一个<div>中，并按照所描述的方式放置？

希望有人对此有所了解。

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

Answer 1

观察

我对这种行为感到惊讶。右上角 - 左下角的绝对定位非常有效（多年来一直有效），但在input type="text"上被IE 10和FF忽略了

Red herring：您的方法与{10}中的input type="range"合作，但不是{10}}。也许这与浏览器对绘图负全部责任的输入相关，那些可能会轻微包装操作系统已经提供的功能的输入。

在FF（PC / Mac）中，我观察到输入的input type="number"属性似乎覆盖了除显式宽度赋值之外的任何内容。例如，设置size会使输入比预期的更窄。观察到的宽度似乎是隐式size=4值的结果。

变通方法

所有这一切，我确实有一个潜在的解决方案，不需要对您的代码进行大量更改，适用于IE9 / 10，FF（PC / Mac），Chrome（PC / Mac）和Safari（Mac）。< / p>

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

size=20

这使用cacl() function decent browser support。值得注意的是，W3认为此功能“存在风险”，因此其未来可能不确定。

作为“酷”，因为#sidebar .x { position: absolute; box-sizing: border-box; width: -webkit-calc(100% - 60px); width: calc(100% - 60px); left: 30px; right: 30px; /* fallback */ }函数是实用的 - 我可能会将有问题的输入包装在另一个元素中并完成它。您将获得更广泛的浏览器支持以及未来的兼容性。

Answer 2

您可以将输入包装在容器div中，并在该div上执行样式。

这是一个例子

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

body { height: 100% } /* Required for percentage heights below */
#sidebar {
    position: absolute;
    top: 0;
    height: 100%;
    left: 0;
    width: 160px;
}
#sidebar #inputContainer {
    position: absolute;
    margin: 0;
    padding: 0;
    height: 21px;
    left: 30px;
    right: 30px;
}
#inputContainer{
    width: 100%;
}

Answer 3

这不完全是你问的，但如果你只关心现代浏览器，你可以使用flexbox。

您只需指定使用flexbox并想要垂直方向，然后您可以设置30px的边距，而不是使用定位：

#sidebar {
    /* stripped out additional styles and prefixes */
    display: flex;
    flex-direction: column;
}

#sidebar x {
    margin: 0 30px;
}

请参阅http://jsfiddle.net/ws9hf/8/

上的演示

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

3 个答案:

观察

变通方法