css:IE中输入的宽度和填充问题

我在IE中输入[文本]字段的宽度有问题,所有版本.

我有一个明确设置宽度为250px的div.在这个div中,我有一个宽度设置为100%的输入文本字段.此输入还具有10px的内部左填充.

在IE中,它将宽度渲染为100%+ 10px.我无法找到一种限制容器宽度的技术.

此问题最初发生在所有浏览器中,但通过添加max-width:100%,很容易在FF,Safari和Chrome中修复.IE6/7不支持这一点,虽然IE8可以,但它仍然将填充添加到宽度.

据我所知,IE的盒子模型在宽度计算中包含了边框和边距,所以根据理解,我仍然无法找到解决方法.

我也试图找到一个更好的解决方案,而不仅仅是使用填充设置我的输入宽度为240px,因为这种形式有各种输入,容器的大小不同,我想找到一个通用的解决方案.

这是一些代码:

    
PHONE (NOT USER EDITABLE)
    

    
ADDRESS(NOT USER EDITABLE)
    

CSS

.places_edit_left{ width:250px; }
.places_edit_left input{ width:100%; max-width:100%; padding-left:10px;}

elon.. 6

最佳方案:真正的解决方案

.content {
    width: 100%;
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    box-sizing:         border-box;
}

这个适用于IE8 +,当然还有其他所有现代浏览器

丑陋的解决方案,但也在旧IE中工作:在这里

最佳方案:真正的解决方案

.content {
    width: 100%;
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    box-sizing:         border-box;
}

这个适用于IE8 +,当然还有其他所有现代浏览器

丑陋的解决方案,但也在旧IE中工作:在这里