DOCTYPE引起的一系列有关问题->Select样式，文本框样式width100%超过父容器-HTML教程-爱易网页

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

日期：2014-05-17　浏览次数：20719 次

DOCTYPE引起的一系列问题-->Select样式，文本框样式width100%超过父容器
一言难尽...各种纠结...
环境：IE8
当不写DOCTYPE或者DOCTYPE为<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">之类的

HTML code


<!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;">
            &nbsp;
        </div>
        <div style="width:200px;background-color: red;">
            <input type='text' style='width:100%;'>
        </div>
    </body>
</html>

IE8显示效果截图：

这个时候，下拉框奇丑无比...但是显示文本框的样式设置为100%没有问题

当吧DOCTYPE 写成HTML5的<!DOCTYPE html>或者 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML code


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

IE8显示效果截图：

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

哪位大神能解决...这屁问题...已经无语了= =

------解决方案--------------------
http://www.w3school.com.cn/xhtml/xhtml_dtd.asp

各个标准解析稍有不同。

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>