为什么 Chrome、Firefox 和 IE 都以不同的方式呈现固定宽度的 SELECT 控件？答案

【问题标题】：Why do Chrome, Firefox and IE all render fixed-width SELECT controls differently?为什么 Chrome、Firefox 和 IE 都以不同的方式呈现固定宽度的 SELECT 控件？
【发布时间】：2012-04-26 07:07:56
【问题描述】：

我在这个问题上脱发 ...似乎当我修复 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">

【问题讨论】：

标签： html cross-browser

【解决方案1】：

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

【讨论】：

OP 想要一个固定的宽度，而不是一个可变的宽度。我 ++'d u 因为字体大小，但 *-width 没有意义。
不太记得 2008 年的事了，但现在 max-width 确实解决了“选择”的问题。加了这个！

【解决方案2】：

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

【讨论】：

【解决方案3】：

输入[类型=文本]，选择 { 边框：实心 1px #c2c1c1; 宽度：150px；填充：2px； }

// 然后

选择{ 宽度：156px； //需要输入[type=text] width + (border and padding) }

/* 输入[type=text] 宽度 = 宽度 + 填充 + 边框

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

*/

【讨论】：

【解决方案4】：

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

【讨论】：

我在原始问题中包含了我的 DOCTYPE ...这看起来正确吗？

【解决方案5】：

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

【讨论】：

【解决方案6】：

浏览器往往会限制您可以使用 CSS 设置表单控件样式的数量，因为表单控件具有许多复杂的样式，这些样式因操作系统而异。 CSS 无法完全描述这一点，因此浏览器将其中的一些内容排除在外。

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

http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/

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

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

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

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

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

但是，Chrome 仍然不会以相同的大小显示它们。

【讨论】：

@Radu 所说的：表单控件限制了您的样式选项。查找 Javascript

【解决方案9】：

Martinator 是正确的。

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

select {
  width:350px;
}

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

select {
      width:350px;
}

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

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

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

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

【讨论】：