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   大笑
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值