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

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">

score 4 · Accepted Answer

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

score 3 · Accepted Answer

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

score 2 · Accepted Answer

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

// 然后

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

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

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

*/

score 1 · Accepted Answer

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

score 1 · Accepted Answer

1

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

于 2008-09-25T18:32:04.193 回答

score 1 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

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

但是，Chrome 仍然没有显示相同的大小。

score 0 · Accepted Answer

马丁纳是正确的。

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

select {
  width:350px;
}

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

select {
      width:350px;
}

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

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

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

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

9 回答 9