首页 文章

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

提问于
浏览 次
5

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

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

在IE中，它将宽度呈现为100％10px . 我无法找到一种限制容器宽度的技术 .

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

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

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

这是一些代码：

<div class="places_edit_left">
    <h4>PHONE <strong>(NOT USER EDITABLE)</strong></h4>
    <input type="text" value="" name="phoneNumber"/>

    <h4>ADDRESS<strong>(NOT USER EDITABLE)</strong></h4>
    <input type="text" value="" name="address"/>
</div>

CSS

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

4 回答

  • 6

    Best solution: Real solution

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

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

    Ugly solution, but work also in older IE: Here

    回复于
  • 2

    • 错误的盒子模型适用于怪异模式下的IE . 因此，您可能需要触发严格模式 . 参见例如http://www.quirksmode.org/css/quirksmode.html

    • 您想使输入与容器一样宽吗？明确设置宽度（250px - 10px用于填充 - XXpx用于边框） . 您希望输入不比div宽吗？将div的溢出设置为隐藏 .

    回复于
  • 0

    不计算最大宽度问题，IE在这里做了正确的事情 . CSS框模型表示元素的整体大小是其填充的宽度PLUS，加上其边距 .

    框模型还表示，对于任何非浮动块级元素，元素的整个大小（包括所有内容）始终是包含元素的100％ . 您可以通过将输入框的宽度设置为“自动”，然后明确设置填充，边框和边距来将此用于您的优势 .

    这是一个小例子（我知道这是一个很多的标记，但这有点过分以说明这一点），

    .places_edit_left{ 
  width:250px; 
  overflow:auto;
}

.places_edit_left input {
  padding-right:0px;
  padding-left:10px;  
  margin: 0 0 0 0;
  border:1px solid black;
  width:auto;
  display:block;
  float:none;
}
    回复于
  • 0

    检查一下：http://vitaly.harisov.name/example/broken-input-width-computation-in-msie.html我已经按照第二个解决方案 .

    回复于

相关问题