为什么Chrome,Firefox和IE都以不同方式呈现固定宽度的SELECT控件?
-
02-07-2019 - |
题
我失去头发在这一个...似乎当我修复宽度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">
解决方案
表单控件总是不太顺从样式化尝试,特别是选择和文件输入,因此在浏览器中可靠地设置样式并考虑到未来的唯一方法是用JavaScript或Flash替换它们并模仿他们的功能
其他提示
尝试在选择上设置 font-size
,这会影响它们的渲染方式。还要考虑 min-width
和 max-width
属性。
输入[类型=文本] 选择 { border:solid 1px#c2c1c1; 宽度:150px; 填充:2px; }
//然后
选择{ 宽度:156px; //需要输入[type = text] width +(border和padding) }
/ * 输入[type = text] width = width + padding + border
选择宽度恰好等于宽度。填充和边框在宽度约束内呈现。这就是SELECT滚动的方式......
* /
确保删除所有默认边距和填充,并明确定义它们。确保使用正确的DOCTYPE,从而在标准模式下呈现IE。
您可以使用伪造的下拉窗口小部件并替换SELECT。
浏览器倾向于限制使用CSS设置表单控件样式的数量,因为表单控件具有许多不同的样式,这些样式因操作系统而异。 CSS无法完全描述,因此浏览器会将其中的一部分限制在其中。
Eric Meyer写了一篇关于这个主题的好文章:
http://meyerweb.com/eric/thoughts/ 2007/05/15 /正规古怪/
您可以做的最好的事情就是接受您不能完全控制表单字段的外观,并尝试任何非常重要的样式。
尝试使用 Firebug 或Chrome的“Inspect Element”功能(右键单击选择控件,单击“检查元素”)以确切查看为该特定对象继承/呈现的样式属性。这应该引导你朝着正确的方向前进。
我已经尝试了所有这些建议......我终于拥有它,所以它在IE和Firefox中看起来很棒。看起来SELECT控件上的填充有问题。如果我将SELECT的宽度增加2个像素,则正确的尺寸。
.combo
{
padding: 2px;
width: 206px;
}
.text
{
padding: 2px;
width: 200px;
}
但是,Chrome仍然没有显示相同的尺寸。
Martinator是对的。
听起来你正试图控制各种类型的输入或菜单的宽度。您可以直接选择对象并指定宽度。例如:
select {
width:350px;
}
或者您可以使用文本区域执行此操作:
select {
width:350px;
}
其他类型的输入需要Martinator提到的语法。因此,对于文本,输入甚至文件类型输入,您可以为每个输入执行此操作:
input[type=text] {
width:350px;
}
input[type=input] {
width:350px;
}
input[type=file] {
width:350px;
}