如何在Webkit中控制Option元素的高度？ [英] How can I control the height of an Option element in Webkit?

问题描述

这似乎很简单，但我甚至找不到告诉我这不是可能的事情，更不用说如何做了。

This seems really simple but I can't even find something telling me that it's not possible, let alone how to do it.

我有一个页面使用扩展/多个选择，我似乎不能控制选项的高度。他们看起来真的很舒服。在Firefox中，选项在 height 和行高都似乎有所期望的效果， padding ，但不是在Chrome 8或Safari 5.我错过了什么？这里是我的代码示例。

I've got a page that uses expanded/multiple selects, and I can't seem to control the height of the options. They look really snug. In Firefox, CSS values for option in height and line-height both seem to have the desired effect, as does padding, but not in Chrome 8 or Safari 5. Am I missing something? Here's a sample of my code. I've put in anything that could affect the option in case there's some overriding value that I'm missing.

body, input, select, checkbox { 
  font-family:'Avenir Lt Std',AppleGothic,'century gothic',Verdana,sans-serif; 
  font-size: 15px; 
  font-weight:200; 
  line-height: 18px; 
}

input, select { 
  color:#4c2a18; 
  border: 1px solid #cfc8b4; 
  background-color:#ffffff; 
  -moz-border-radius: 0; 
  -webkit-border-radius: 0; 
  border-radius: 0;
  margin:0; 
}

option { 
  height: 35px; 
  padding:5px; 
  line-height: 35px; 
}

<select size="5">
  <option value="">This is option 1</option>
  <option value="">Option 2</option>
  <option value="">Just trying to show how the line height thing works.</option>
</select>

您可以在操作中查看这里

推荐答案

根据电动工具箱：

on optgroup或
选项在Chrome中不起作用，因此
无法控制
缩进的金额。你可以设置一个选择作为整体在Chrome中的填充
（作为
你可以与IE8），但它看起来真的
奇怪。与IE8不同，您可以在选择中的任意位置单击
以打开它，甚至
（如果有填充）。

Setting padding on an optgroup or option has no effect in Chrome so you cannot control the amount of indentation. You can set the padding of a select as a whole in Chrome (as you can with IE8) but it looks really weird. Unlike IE8 you can click anywhere in the select to open it even if it has padding.

这篇关于如何在Webkit中控制Option元素的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！