css修改控件宽度,关于Internet Explorer：CSS：如何设置表单控件的宽度，使它们都具有相同的宽度？...

请考虑以下示例：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

div { width: 15em }

input, textarea, select { width: 100%;

-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box }

Text area

One

Two

Three

在支持border-box框大小调整的浏览器上，按我的意愿渲染：

正确渲染http://img.skitch.com/20100522-c75mhdut2q32yc7u5r2tkft1n4.png

但是，在IE 6/7上，它呈现为：

IE 6/7渲染http://img.skitch.com/20100522-f5pkgnwwceaak3t8fqq2w16gfm.png

如何在IE 6/7中获得与其他浏览器相同的渲染，而无需设置像素大小？

介意我建议将此问题交叉发布到doctype.com？

解决方案是使用CSS和JavaScript来替换浏览器供应商密谋的表单控件，以便对样式产生痛苦。 选择只是一个带有onmouseup事件的下拉菜单。 JS驱动的文本编辑器(丰富而简单)可以替代在线的文本区域。 甚至还有用于此目的的库。 (例)

CSS无法实现这一点。 我做了一些研究，我发现在此之前问过同样的问题。 解决方案是使用此boxsizing.htc文件并将以下行添加到HTML头：

一个快速修复可能是IE6 / 7浏览器 - 用select { *width:102.5%; _width:102.5%; }之类的东西攻击它，虽然如果太宽，这可能不符合像素。

这个问题是，它会锁定您给定的字体大小。 假设我添加select { *width:102.5% }。 完美，现在表单字段具有相同的宽度：img.skitch.com/20100522-ght27dws54jqp8r79bf5nf1hus.png。 但现在添加一个body { font-size: 200% }。 使用相同的select { *width:102.5% }，您将获得：img.skitch.com/20100522-ksie3bm45e83g314869fdhby29.png。 因此，您放入select { *width:102.5% }的百分比将取决于字体大小。 随着字体大小的变化，您需要更改该百分比。 而不是这个，我宁愿选择宽度像素。

也许这可以帮到你：CSS3支持Internet Explorer 6,7和8.从页面：

IE-CSS3 is a script to provide

Internet Explorer support for several

of the popular new styles available in

the upcoming CSS3 standard.

不幸的是，这个htc不包括对box-sizing的支持。