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

Popular posts from this blog

c# - ListView onScroll event -

PHP - get image from byte array -

Linux Terminal Problem with Non-Canonical Terminal I/O app -