Locking input elements on Firefox
I'm trying to have a CSS eleme开发者_Python百科nt lock to two sides of its container. The following CSS works for elements such as div, but not for input elements in Firefox
left: 20px; right: 20px; top: 20px; height: 20px; width: auto; position: absolute;
I've found I can wrap the element in a DIV, but doing so is not really an option as it is very impractical in my situation.
Have you tried the following?
width: 100%
According to w3schools, it should expand to containing element.
The reason width: auto
doesn't work for input
s in Mozilla is because they have an intrinsic width which is set by the size
attribute, defaulting to 20
when the attribute is not declared.
I don't see an easy way around that. The usual cross-browser compatible way is the div wrapper with a margin then setting the width of the div to 100%
inside that. This is necessary for IE6 too, which doesn't support absolute edge positioning (setting left and right but not width, or top and bottom but not height) on any element.
精彩评论