设置< select>的高度在Firefox 2中
-
06-07-2019 - |
题
我在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
不隶属于 StackOverflow