DOCTYPE引起的一系列问题-->Select样式，文本框样式width100%超过父容器

HTML <!DOCTYPE> 标签

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

DOCTYPE的详细说明见W3Schcool：http://www.w3school.com.cn/tags/tag_doctype.asp

笔者的问题：

当不写DOCTYPE或者DOCTYPE为<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">之类的时。代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
    </head>
    <body>
        <select>
            <option>选项...</option>
        </select>
        <br><br>
        <div style="width:200px;background-color: green;">
             
        </div>
        <div style="width:200px;background-color: red;">
            <input type='text' style='width:100%;'>
        </div>
    </body>
</html>

IE8显示效果：

可以看到这个时候文本框的样式设置width=100% 没有问题的，但是select的样式却奇丑无比。。。

当把DOCTYPE 写成HTML5的<!DOCTYPE html>或者 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">时，代码如下：

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <select>
            <option>选项...</option>
        </select>
        <br><br>
        <div style="width:200px;background-color: green;">
             
        </div>
        <div style="width:200px;background-color: red;">
            <input type='text' style='width:100%;'>
        </div>
    </body>
</html>

IE8显示效果：

这个时候下拉框变美了...文本框则超出....

这个问题找了一个上午，就在即将要放弃的时候。。终于在stackoverflow看到一哥们给出如下的解决方案：

input[type="text"] {
     width: 100%; 
     box-sizing: border-box;
     -webkit-box-sizing:border-box;
     -moz-box-sizing: border-box;
}

代码：

<!DOCTYPE HTML>
<html>
	<head>
	</head>
	<body>
		<select>
			<option>选项...</option>
		</select>
		<br><br>
		<div style="width:200px;background-color: green;">
			 
		</div>
		<div style="width:200px;background-color: red;"  >
			<!-- 刚开始没有加margin:0px; 后来把文本框放在td中显示有一点点瑕疵,所以加上了 -->
			<input type='text' style="margin: 0px;width: 100%;padding: 0px; box-sizing: border-box;-webkit-box-sizing:border-box;-moz-box-sizing: border-box;">
		</div>
	</div>
	</body>
</html>

IE8显示效果：

...感谢stackoverflow的pricco

stackoverflow的帖子:http://stackoverflow.com/questions/2371105/html-input-textbox-with-a-width-of-100-overflows-table-cells

posted on 2012-04-27 13:35 springside5 阅读(236) 评论(0) 编辑收藏举报