7

我正在研究绝对定位的 CSS 格式<input>。我希望它在它的容器内“拉伸”（它也被定位为“绝对”），这样它就可以在左右两边留下例如 30px 的空间，并填充里面的所有空间......

我已经在 w3.org 网站上找到了一个示例，它使用左和右在 CSS 中创建一种“框架集”。

我还阅读了来自 A-List-Apart 的一篇关于这种技术的文章，并在这里发现了其他几个处理类似问题的问题，但这些问题都没有集中在我将要描述的具体问题上。我还发现我可以用 包裹内部<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 (v.26) 时按预期工作，但在 FF.20 或 IE.10 中它看起来很糟糕：<input>超出其容器 div 的右边距 .. 与放置宽度时所得到的几乎相同:100% 并且只设置左侧位置...

有趣的是，这种使用 DIV 和内联块 SPAN 的方法在所有三种浏览器中都按预期工作。

它是浏览器方面的错误吗？有没有办法让它在没有解决方法的情况下<input>用 width:100%括<div>在以所述方式定位的另一个中？

希望有人对此有所了解。

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

4

3 回答 3

6

观察

我对这种行为感到惊讶。top-right-bottom-left 绝对定位效果非常好（并且已经使用了多年），但它被 IE 10 和 FF 忽略input type="text"

红鲱鱼：您的方法确实适用于 IE 10，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()函数很“酷”——务实——我可能会将有问题的输入包装在另一个元素中并完成它。您将获得更广泛的浏览器支持和未来的兼容性。

于 2013-04-29T21:23:14.230 回答
1

您可以将输入包装在容器 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%;
}
于 2014-03-25T07:32:00.853 回答
0

这不完全是你问的，但如果你只关心现代浏览器，你可以使用 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/上的演示

于 2013-04-29T20:58:26.357 回答