Question

我失去头发在这一个...似乎当我修复宽度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">

Answer 1

尝试在选择上设置font-size，这可能会影响它们的呈现方式。另请考虑min-width和max-width属性。

Answer 2

表单控件总是不太顺从样式化尝试，特别是选择和文件输入，因此在浏览器中可靠地设置样式并考虑到未来的唯一方法是用JavaScript或Flash替换它们并模仿他们的功能

Answer 3

输入[类型=文本] 选择 { border：solid 1px＃c2c1c1; 宽度：150px; 填充：2px; }

//然后

选择{ 宽度：156px; //需要输入[type = text] width +（border和padding） }

/ * 输入[type = text] width = width + padding + border

选择宽度恰好等于宽度。填充和边框在宽度约束内呈现。这就是SELECT滚动的方式......

* /

Answer 4

确保删除所有默认边距和填充，并明确定义它们。确保使用正确的DOCTYPE，从而在标准模式下呈现IE。

Answer 5

您可以使用伪造的下拉窗口小部件并替换SELECT。

Answer 6

浏览器倾向于限制使用CSS设置表单控件样式的数量，因为表单控件具有许多不同的样式，这些样式因操作系统而异。 CSS无法完全描述，因此浏览器会将其中一些限制在其中。

Eric Meyer写了一篇关于这个主题的好文章：

您可以做的最好的事情就是接受您无法完全控制表单字段的外观，并尝试任何样式非常重要。

Answer 7

尝试使用Firebug或Chrome的“检查元素”功能（右键单击选择控件，单击“检查元素”）以确切了解为该特定对象继承/呈现的样式属性。这应该引导你朝着正确的方向前进。

Answer 8

我已经尝试了所有这些建议......我终于拥有它，所以它在IE和Firefox中看起来很棒。看起来SELECT控件上的填充有问题。如果我将SELECT的宽度增加2个像素，则正确的尺寸。

 .combo
 {
     padding: 2px;
     width: 206px;
 }

.text
{
    padding: 2px;
    width: 200px;
}

但是，Chrome仍然没有显示相同的尺寸。

Answer 9

Martinator是对的。

听起来你正试图控制各种类型的输入或菜单的宽度。您可以直接选择对象并指定宽度。例如：

select {
  width:350px;
}

或者您可以使用文本区域执行此操作：

select {
      width:350px;
}

其他类型的输入需要Martinator提到的语法。因此，对于文本，输入甚至文件类型输入，您可以为每个输入执行此操作：

input[type=text] {
      width:350px;
}

input[type=input] {
      width:350px;
}

input[type=file] {
      width:350px;
}