Question

我在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吗？我可以解决它还是解决它？

Answer 1

欢迎来到形式控制造型的精彩世界。

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

有使用Javascript的替代品 - 我相信jQuery UI有一些类似于select元素的小部件。您也可以使用此jQuery click menu并附加一个设置隐藏输入字段值的函数。我以前做过这个，它很好用。这些东西是你完全控制尺寸和外观的唯一方法。

Answer 2

可能有一些浏览器默认值正在播放中。你使用reset CSS然后应用你的风格会发生什么？它仍然是2px关闭？

Answer 3

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

您需要创建自己的图像，并使用这些图像的单击事件来切换实际的表单输入。那些表单输入应该在容器样式display：none中。这样，您可以根据需要进行设计。

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

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

3 个答案: