当前位置：文江博客话题详情

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

发布于 2024-07-29 03:50:47 字数 975 浏览 4 评论 0原文

我在 IE 所有版本中的输入[文本]字段上遇到宽度问题。

我有一个明确设置宽度为 250px 的 div。在此 div 中，我有一个宽度设置为 100% 的输入文本字段。该输入还有一个 10px 的内部左内边距。

在 IE 中，它将宽度呈现为 100% + 10px。我无法找出限制容器宽度的技术。

这个问题最初出现在所有浏览器中，但在 FF、Safari 和 Chrome 中通过添加 max-width:100% 很容易修复。 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;}

原文

I'm having a problem with widths on input[text] fields in IE, all versions.

I have a div with an explicitly set width of 250px.
In this div, I have an input text field with width set to 100%. This input also has an internal left-padding of 10px.

In IE, it renders the width as 100% + 10px. I cannot figure out a technique for constraining the width to the container.

This problem initially occurred in all browsers, but was very easy to fix in FF, Safari and Chrome by adding max-width:100%. IE6/7 don't support this, while IE8 does but it also still adds the padding to the width.

I understand that IE's box model includes border and margin in its width calculations, so with that given as understood I still can't figure a way around this.

I'm also trying to find a better solution than just setting my input widths to 240px with the padding, because there are various inputs in this form who's containers vary in size and I'd like to find a universal solution.

Here's some code:

<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;}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

最佳男配角 2024-08-05 03:50:47

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

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

此解决方案适用于 IE8+，当然还有所有其他现代浏览器

丑陋的解决方案，但也适用于较旧的 IE：这里

Best solution: Real solution

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

This one will work for IE8+ and of course all other modern browsers

Ugly solution, but work also in older IE: Here

回复收藏 0 原文

佞臣 2024-08-05 03:50:47

错误的盒子模型适用于怪异模式下的 IE。因此，您可能需要触发严格模式。参见例如 http://www.quirksmode.org/css/quirksmode.html< /p>
< p>您想让输入与容器一样宽吗？明确设置宽度（内边距为 250px - 10px - 边框为 XXpx）。您希望输入不比 div 宽吗？将 div 的溢出设置为隐藏。

回复收藏 0 原文

二手情话 2024-08-05 03:50:47

不考虑最大宽度问题，IE 在这里做的是正确的事情。 CSS 盒子模型表示元素的整体大小是宽度加上其填充，加上其边距。

盒模型还表示，对于任何非浮动块级元素，元素的整个大小（包括所有内容）始终是包含元素的 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;
}

Not counting the max-width issue, IE is doing the right thing here. The CSS box model says that an element's overall size is the width PLUS its padding, PLUS its margins.

The box model also says that for any non-floating block level element, the entire size of the element (including everything) is always 100% of the containing element. You can use this to your advantage by setting the width of your input box to be "auto", and then setting your paddings, border, and margins explicitly.

Here's a little example (I know this is a lot of markup, but this is a bit of overkill to illustrate the point),

.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 原文