看看我想出了什么，一种使用@R_982_2419@-sizing:border-@R_982_2419@CSS 3 相对未知的样式的解决方案。这允许任何元素上的“真”宽度为100％，无论该元素的填充和/或边框如何。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Cross-browser CSS @R_982_2419@-sizing:border-@R_982_2419@</title>
<style type="text/css">
form {display:block; margin:0; padding:0; width:50%; border:1px solid green; overflow:visible}
div, input {display:block; border:1px solid red; padding:5px; width:100%; font:normal 12px Arial}
/* The voodoo starts here */
.bb {
@R_982_2419@-sizing: border-@R_982_2419@; /* CSS 3 rec */
-moz-@R_982_2419@-sizing: border-@R_982_2419@; /* Firefox 2 */
-ms-@R_982_2419@-sizing: border-@R_982_2419@; /* Internet Explorer 8 */
-webkit-@R_982_2419@-sizing: border-@R_982_2419@; /* Safari 3 */
-khtml-@R_982_2419@-sizing: border-@R_982_2419@; /* Konqueror */
}
</style>
<!-- The voodoo gets scary. Force Internet Explorer 6 and Internet Explorer 7 to support Internet Explorer 5's @R_982_2419@ model -->
<!--[if lt IE 8]><style>.bb {behavior:url("@R_982_2419@sizing.htc");}</style><![endif]-->
</head>
<body>
<form name="foo" action="#">
<div class="bb">div</div>
<input class="bb" size="20" name="bar" value="field">
</form>
</body>
</html>
该解决方案通过Erik Arvidsson编写的行为支持Internet Explorer 6和Internet Explorer 7，并通过Dean Edwards的一些调整来支持百分比和其他非像素宽度。
602392714
清零编程群