css: issue with width and padding of an input in IE -
I have a problem with the width on the input [text] field in IE, all versions.
I have a divisor in which clearly set width is 250px. In this device, I have an input text field, which is set to 100% width. This input also has 10px internal left-padding.
In IE, it underlines the width as 100% + 10px. I can not detect a technique to disrupt the width of the container.
This problem was initially encountered in all browsers, but fixing in FF, Safari and Chrome was very easy by adding maximum width: 100% IE 6/7 does not support it, while IE8 does But it also adds padding in width.
I think that the IE box's box also includes the boundary and margin in its calculation of width, so let's assume that I still can not find any way around it.
I'm just trying to find a better solution than setting my input width to padding in 240 pixels, because there are many inputs in this form, there is a difference in the container size and I can find a universal solution Want to
Here are some code:
& lt; Div class = "places_edit_left" & gt; & Lt; H4 & gt; Phone & lt; Strong & gt; (User not edited) & lt; / Strong> & Lt; / H4 & gt; & Lt; Input type = "text" value = "" name = "phone number" /> & Lt; H4 & gt; ADDRESS & lt; Strong & gt; (User not edited) & lt; / Strong> & Lt; / H4 & gt; & Lt; Input type = "text" value = "" name = "address" /> & Lt; / Div & gt;
css
.places_edit_left {width: 250px; } .places_edit_left Input {width: 100%; Max-width: 100%; Padding-left: 10px;}
best solution:
.content {width: 100%; -MOZ Box-Size: border-box; -WebKit-box-size: border-box; Box-size: border-box; }
This will work for one IE8 + and absolutely all other modern browsers
Unwanted solution, but work in the old IE also:
Comments
Post a Comment