Question

我支持在没有设置DOCTYPE的情况下编写的旧的大型网站。下面的测试示例显示了差异，但有没有办法使用相同的样式表使大小相同？

（为什么？：将DOCTYPE添加到此站点必须是针对数千页代码的逐步且经过仔细测试的实现，在开始之前，我看到是否可以避免维护两个单独的CSS表单）。

Browser rendering on Chrome

源代码（带doctype）：

<!DOCTYPE html>
<head><title>Untitled 1</title>
<style type="text/css">
input, div{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}
input[type=text],input[type=password]{
    border:1px #AAAAAA solid;
    height:24px;
    line-height:24px;
    margin:0px;
    padding:0px 0px 0px 3px;
}
</style>
</head>
<html>
<body>
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <input type="text" value="Too big with doctype" style="width:200px" onclick="alert(this.offsetHeight)">
            </td>
            <td>
                <div style="height:24px;width:100px;background-color:#dddddd;">100 x 24px</div>
            </td>
            <td>
                <input type="text" value="Too small without doctype" style="width:200px;height:22px" onclick="alert(this.offsetHeight)">
            </td>
        </tr>
    </table>
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <div style="height:24px;width:200px;background-color:#dddddd;">200 x 24px</div>
            </td>
            <td>
                <div style="height:24px;width:100px;background-color:silver;">100 x 24px</div>
            </td>
            <td>
                <div style="height:24px;width:200px;background-color:#dddddd;">200 x 24px</div>
            </td>
        </tr>
    </table>
</body>
</html>

所以对我而言，如果没有doctype，文本输入的大小就会像指定它们一样呈现。但是使用doctype，它会将边框和任何填充添加到高度或宽度。我可以在不创建单独的样式表的情况下解决这个问题吗？

无论是否有DOCTYPE，文本输入高度/宽度的样式都可以相同吗？

0 个答案: