在 Firefox 2 中设置 <select> 的高度答案

【问题标题】：Setting the height of a <select> in Firefox 2在 Firefox 2 中设置 <select> 的高度
【发布时间】：2012-07-29 18:23:52
【问题描述】：

我对 Firefox 2 中的 HTML 选择框高度有一个奇怪的问题，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>FIREFOX 2 SELECT BOX HEIGHT ISSUE</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
      body    { margin: 0; padding:0 ;}
   div     { height: 20px; background:red; float: left; overflow: hidden; }
   select  { height: 20px; width: 100px; }
    </style>
  </head>

  <body>
    <div>Should be same height as </div>
    <select><option>this</option></select>
  </body>
</html>

高度大了 2 个像素 - 填充、字体大小和行高似乎对它没有任何影响，而且我的想法和地方都用完了。我是否应该假设选择框在 FF2 中的实际高度总是 css height + 2？我可以修复它或解决它吗？

【问题讨论】：

标签： html css firefox height html-select

【解决方案1】：

欢迎来到表单控件样式的美妙世界。

不想听起来失败主义，我认为你应该放弃。无论您如何设置表单控件的样式，总会有浏览器完全忽略您的样式。我相信 Safari 会忽略大多数 CSS。有关示例，请参见 456 Berea Street 上的“styling select elements”。

还有一些使用 Javascript 的替代方案 - 我相信 jQuery UI 有一些类似于 select 元素的小部件。您也可以使用这个jQuery click menu 并附加一个设置隐藏输入字段值的函数。我以前做过这个，效果很好。只有这样，您才能完全控制尺寸和外观。

【讨论】：

嗯，我需要的支持是 Safari 4、Firefox 2+、Ie 6+、Opera 10 - 除了 FF2 之外，一切都正常，恐怕我必须在 FF 上使用条件样式
我错过了你特别提到的第 2 版。在这种情况下，我不会担心像素完美。 Firefox 2 的使用率非常低，我相信您的用户不会在意。

【解决方案2】：

可能存在一些浏览器默认设置。如果你使用reset CSS 然后应用你的样式会发生什么？还差2px吗？

【讨论】：

很遗憾，是的。我开始认为这是一个纯粹的FF2错误，在FF3中没有这样的问题。

【解决方案3】：

放弃使用 CSS 来设置样式。拥抱 jquery / javascript。

您需要创建自己的图像，并使用这些图像的点击事件来切换实际的表单输入。这些表单输入应位于容器样式的 display:none 中。这样，您可以随心所欲地设计它。

这是一篇关于该主题的好文章： http://www.noupe.com/css/form-elements-40-cssjs-styling-and-functionality-techniques.html

【讨论】：

不，在我的情况下这不是一个选项 - 我已经尝试过了，但我的网站都是关于各种尺寸的动态表单和输入框，中途它被各种选择框的图像超载视图，这极大地影响了页面加载时间。事情是我设法让控件看起来差不多，除了一个地方，那些 2px 真的很碍眼。
好吧，您可能会争辩说，在这台机器上使用 DHTML 更有理由，但在我的情况下，这些框必须看起来都一样。