您的位置：首页 > Web前端 > CSS

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

2012-04-27 13:35 477 查看
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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航