当宽度设置为 100% 时，div 的内容比 div 本身长吗? [英] Content of div is longer then div itself when width is set to 100%?

问题描述

我有 div 的固定宽度只包含 input 文本框和 input 的 width 设置为<代码>100%.我希望它填满 div 但它会稍微长一些.

演示代码:

HTML:

<input class="content" id="Text1" type="text"/>

CSS:

.container{宽度:300px；高度:30px；边框:细纯红色；}.内容{宽度:100%；}

结果(火狐):

在 IE 8、Chrome、Safari 中也会发生这种情况……溢出宽度似乎在不同浏览器中有所不同.如何使内容完全填充 div 的宽度?

解决方案

box-sizing: border-box 是一种快速、简单的修复方法:

此适用于所有现代浏览器和 IE8+.

这是一个演示:http://jsfiddle.net/thirtydot/QkmSk/301/

.content {宽度:100%；box-sizing: 边框框；}

_{参见此处，了解 IE7 兼容方法.}

I have div of fixed width containing only input text box and width of that input is set to 100%. I expect it to fill the div but instead it is slightly longer.

Demonstration code:

HTML:

<div class="container">
    <input class="content" id="Text1" type="text" />
</div>

CSS:

.container
{
    width: 300px;
    height: 30px;
    border: thin solid red;
}
.content
{
    width: 100%;
}

Result (Firefox):

This happens also in IE 8, Chrome, Safari... The overflow width seems to vary in different browsers. How do I make the content to exactly fill the width of the div?

解决方案

box-sizing: border-box is a quick, easy way to fix it:

This will work in all modern browsers, and IE8+.

Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/

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

_{See here for an icky IE7 compatible method.}

这篇关于当宽度设置为 100% 时，div 的内容比 div 本身长吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！