【问题标题】:Cannot nullify the padding on a <select> in IE 8无法在 IE 8 中使 <select> 上的填充无效
【发布时间】:2012-06-19 01:00:44
【问题描述】:

我遇到了 IE8 的问题。

我有一个选择框来选择电容单位 pF、nF 和 mF。

现在,即使我设置了padding:0,文本也有点下降,它会剪切文本。

所以“pF”选项实际上看起来像“nF”,这是不可接受的。

我想知道是否有任何修复。除了将填充设置为 0 之外,我想不出什么了,这又不起作用了。设置小line-height 也无济于事。

CSS:

select {
    width: 40px;
    height: 16px;
    padding: 0px;
    font: 8pt Helvetica;
}

有什么想法吗?

编辑:JSFIDDLE:

http://jsfiddle.net/zuYsF/

看到'pF'默认被选中,它实际上看起来像'nF'。

【问题讨论】:

    标签: html css internet-explorer-8 html-select


    【解决方案1】:

    我不认为这是填充导致问题,这可能与行高有关

    所以尝试将行高设置为框的高度减去边框顶部和边框底部(从外观上看,这看起来总共是 4px...),高度可能约为 12px...

    line-height: 12px;
    

    如果这不能解决问题,您将不得不在 jsfiddle 中重现它,以便我们可以修改代码以将实际工作示例返回给您。

    请注意,表单元素在样式方面是出了名的不可靠,而且您无法摆脱一切。 display: block 可以创造奇迹,但在这种情况下无济于事。

    这似乎是 &lt;select&gt; 标记样式的欢呼限制......真的在所有浏览器中。

    您可能想检查这个问题,这似乎并非完全无关。

    I want to vertical-align text in select box

    【讨论】:

    • 这也是我想的,但由于某种原因它不起作用,即使我是这样的:line-height: 14px !important;
    • 另外,谷歌浏览器将 line-height 属性显示为“正常”,即使它确实看到声明的自定义 line-height。
    • 请在您的问题中更清楚地注意这一点。制作一个 jsfiddle,重现问题。
    • 是否可以用css伪选择器选择select的内部?
    • 这是有道理的,但恐怕这行不通。表单元素早于当前的标准,它们的行为充其量是古怪的......我认为你在这里快速修复的最佳选择是确保框的高度始终至少适应你想要的文本的高度有.
    猜你喜欢
    • 1970-01-01
    • 2012-01-24
    • 1970-01-01
    • 2020-12-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-09-23
    相关资源
    最近更新 更多