为什么Chrome,Firefox和IE都呈现不同宽度的固定宽度SELECT控件?
我在这上面失去了头绪……看来,当我固定HTML SELECT控件的宽度时,它会根据浏览器来呈现不同的宽度。
任何想法如何将其标准化而不必使用多个样式表?
这是我正在处理的内容:
.combo { padding: 2px; width: 200px; } .text { padding: 2px; width: 200px; }
这是我的页面文档类型:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
解决方案
确保删除所有默认边距和填充,并明确定义它们。确保我们使用的是正确的DOCTYPE,并因此在"标准模式"下呈现IE。
尝试在选择项上设置`font-size',这可能会影响它们的呈现方式。还应考虑"最小宽度"和"最大宽度"属性。
我们可以使用伪造的下拉小部件并替换SELECT。
尝试使用Firebug或者Chrome的"检查元素"功能(右键单击选择控件,单击"检查元素"),以查看确切的样式属性正在为该特定对象继承/渲染。那应该引导我们朝正确的方向前进。
我已经尝试了所有这些建议...最终得到了它,因此它在IE和Firefox中看起来不错。 SELECT控件上的填充似乎有问题。如果我将SELECT的宽度增加2个像素,则现在的大小正确。
.combo { padding: 2px; width: 206px; } .text { padding: 2px; width: 200px; }
但是,Chrome仍然无法显示相同的尺寸。
表单控件始终不会太容易受到样式尝试的干扰,特别是选择和文件输入,因此,要可靠地跨浏览器对样式进行样式设置并牢记面向未来,唯一的方法是用JavaScript或者Flash替换它们并模仿其功能
浏览器往往会限制我们可以使用CSS设置表单控件样式的数量,因为表单控件具有许多复杂的样式,这些样式在操作系统之间有所不同。 CSS无法完全描述这一点,因此浏览器将其限制了一些。
埃里克·迈耶(Eric Meyer)就该主题写了一篇很好的文章:
http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/
我们能做的最好的事情就是接受我们对表单域的外观没有完全的控制权,并尝试任何真正重要的样式。