当使用左右CSS属性绝对定位INPUT时，会出现奇怪的行为 [英] Strange behaviour when absolute positioning an INPUT with both left and right CSS properties

问题描述

我正在研究绝对定位的< input> 的CSS格式。
我想让它在它的容器（也被定位绝对）伸展，使它离开例如左右30px，并填充内的所有空间...

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

我还阅读了来自A-List-Apart的一篇文章谈论这种技术，并发现了一些其他问题在这里处理类似的麻烦，但没有一个专注于我将要描述的具体问题。我还发现我可以用< div> 包装内部< input> 喜欢更多地了解这个主题，以了解为什么它是行为不端...

这里是工作样本我做了测试和澄清的想法。
简而言之，它是这样简单的：

 < div id =sidebar> 
< input type =textvalue =input/> 
< / div> 
  

，样式如下：

  body {height：100％} / *下面的百分比高度需要* / 
 #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; 
} 
  

有趣的一点是最后三行，并将宽度设为auto。

结果是它只能按照预期使用Chrome（v.26），但在FF.20或IE.10中看起来破碎：< input> 扩展超出它的容器div的右边距。与放宽度：100％，只有设置左位置时得到的相同。 。

有趣的是，这种使用DIV和inline-block SPAN的方法在所有三个浏览器中都能正常工作。

这是浏览器端的错误吗？有没有办法让它工作没有解决方法将< input> 与width：100％在另一个< div> 以描述的方式定位？

希望有人对此有线索。

：我专注于现代的html5浏览器，所以我不介意如果它不能在IE8或更旧的工作。

解决方案

观察结果

我对此行为感到惊讶。右上 - 左下绝对定位工作奇妙（并有多年），但它被忽略IE 10和FF 输入类型=文本

红鲱鱼：您的做法 使用输入类型=范围，但不能 input type =number。可能这与浏览器负责绘图的输入相关，而这些输入可能很少包括由OS提供的功能。 p>

在FF（PC / Mac）中我观察到输入的 size 属性似乎覆盖了任何东西，分配。例如，设置 size = 4 会使输入比所需的更窄。观察到的宽度似乎是隐式 size = 20 值的结果。

解决方法

$所有这一切，我有一个潜在的解决方案，不需要大量的更改你的代码，并在IE9 / 10，FF（PC / Mac），Chrome（PC / 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（）函数是—是务实的—我可能会将冒犯的输入包装在另一个元素中，并使用它。您将获得更广泛的浏览器支持和未来的兼容性。

I'm studying the CSS formatting of an absolutely positioned <input>. I'd like it to "stretch" inside its container (which is also positioned "absolute") so that it leaves for instance 30px both left and right, and fills all the space within...

I already found a sample on w3.org site, which uses both left and right to create a kind of "frameset" in CSS.

I also read an article from A-List-Apart talking about this kind of technique and found several other questions here dealing similar troubles, but none of these focuses the specific issue I'm going to describe. I also found that I can wrap the inner <input> with a <div>, but I'd like to dig a bit more on this subject to understand why it is misbehaving...

Here is a working sample I made to test and clarify the idea. In short it is something as simple as this:

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

with a style like this:

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;
}

The interesting point is on the last three lines, when I set left and right and leave width as "auto".

The outcome is that it only works as expected using Chrome (v.26), but in FF.20 or IE.10 it looks broken: the <input> extends beyond the right margin of its container div.. much the same you get when putting width:100% and only settings left position...

The funny part is that this approach with DIVs and inline-block SPANs works as expected across all three browsers.

Is it a bug on browsers' side? Is there a way to make it work without the workaround to enclose <input> with width:100% inside another <div> positioned in the described way?

Hope that someone has a clue on this.

PS: I'm focusing on "modern", html5 browsers, so I don't mind if it won't work on IE8 or older..

解决方案

Observations

I'm surprised by this behavior. top-right-bottom-left absolute positioning works marvelously (and has for years) but it's ignored by IE 10 and FF on input type="text"

Red herring: your approach does work with input type="range" but not input type="number" in IE 10. Perhaps this is related to which inputs the browser takes sole responsibility for drawing, versus those inputs that may thinly wrap functionality already provided by the OS.

In FF (PC/Mac) I observed that the size property of the input seems to override anything but an explicit width assignment. For example, setting size=4 will make the input more narrow than desired. The observed width seems to be the result of an implicit size=20 value.

Workarounds

All that said, I do have a potential solution which doesn't require extensive changes to your code and works in IE9/10, FF (PC/Mac), Chrome (PC/Mac) and Safari (Mac).

Demo: 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 */
}

This uses the cacl() function which has decent browser support. It's worth noting that this feature is deemed "at risk" by the W3, so its future may be uncertain.

As "cool" as the calc() function is—being pragmatic—I'd probably wrap the offending input(s) in another element and be done with it. You'll achieve wider browser support, and future compatibility.

这篇关于当使用左右CSS属性绝对定位INPUT时，会出现奇怪的行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！