绝对定位具有左右 CSS 属性的 INPUT 时的奇怪行为答案

【问题标题】：Strange behaviour when absolute positioning an INPUT with both left and right CSS properties绝对定位具有左右 CSS 属性的 INPUT 时的奇怪行为
【发布时间】：2013-04-23 10:34:12
【问题描述】：

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

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

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

这里是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 (v.26) 时按预期工作，但在 FF.20 或 IE.10 中它看起来很糟糕：<input> 超出了其容器 div 的右边距。放置宽度时得到的相同：100% 并且仅设置左侧位置...

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

这是浏览器方面的错误吗？有没有办法让它工作而无需解决方法将 <input> 与 width:100% 包含在以所述方式定位的另一个 <div> 中？

希望有人对此有所了解。

PS：我专注于“现代”的 html5 浏览器，所以我不介意它是否无法在 IE8 或更早版本上运行..

【问题讨论】：

当你想让一个元素表现得像另一种类型的元素时，你想到的可能是通过赋予它相同的属性使其表现得像这样的元素，话虽如此，我的意思是让它@ 987654332@对于初学者，看看你会去哪里
我已经尝试过了，（当然）它并不那么容易，但你是对的：永远不要忽视简单的事情 :)

标签： html css layout cross-browser

【解决方案1】：

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

你只需要指定你使用的是flexbox并且想要一个垂直方向，那么你可以设置30px的margin，而不是使用定位：

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

#sidebar x {
    margin: 0 30px;
}

在http://jsfiddle.net/ws9hf/8/查看演示

【讨论】：

在 FF 中（迄今为止的最新官方版本，v.20.0.1）您的示例无法按预期工作（input 超出绿色条）..无论如何这是我的另一条路径'想多学习一点 =)

【解决方案2】：

观察

我对这种行为感到惊讶。 top-right-bottom-left 绝对定位效果非常好（并且多年来一直如此），但 IE 10 和 FF 在 input type="text"

上忽略了它

红鲱鱼：您的方法确实适用于input type="range"，但不适用于 IE 10 中的 input type="number"。也许这与浏览器单独负责绘制的输入相对于那些可能操作系统已经提供了瘦包装功能。

在 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 */
}

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

就像calc() 函数一样“酷”——务实——我可能会将有问题的输入包装在另一个元素中并完成它。您将获得更广泛的浏览器支持和未来的兼容性。

【讨论】：

我同意，关键可能是浏览器如何渲染<input> 控件：如果它们是由操作系统绘制的，那么浏览器操作系统端可能会出现一些奇怪的故障，这- 除了可能是一个错误 - 可以解释他们的不同行为......
当left & right 时，使用width: calc(100% - leftVal - rightVal) 将像普通div 一样扩展input 元素
迄今为止最好的解决方案，它不涉及任何包装器元素，随之而来的是填充和边框等其他问题（例如：尝试在% 中应用填充 - 如果应用于包装器，那么它不会填充 input。如果您应用到输入，则 % 值将根据包装宽度计算，这不是预期的）

【解决方案3】：

您可以将输入包装在容器 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%;
}

【讨论】：