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">时,代码如下:
IE8显示效果:
<!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
