设置＆lt; select＆gt;的高度在Firefox 2中

StackOverflow https://stackoverflow.com/questions/1614206

题

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

有帮助吗？

解决方案

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

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

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

其他提示

可能有一些浏览器默认值正在播放中。如果您使用重置CSS ，然后申请你的风格？它仍然是2px关闭？

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

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

这是一篇关于这个主题的好文章： http：//www.noupe。 COM / CSS /形式元素-40-cssjs造型和 - 功能-techniques.html

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top