html - 仅在 Chrome 中的额外填充

Question

h3我只在 Chrome 中的标签中得到一个奇怪的填充。最奇怪的是，我无法通过 CSS 阻止或控制它，当我选择它的文本时h3，似乎选择扩展到文本的右侧和底部。

在 Chrome 中预览：

在其他浏览器中预览：

Chrome 中的这种额外填充会导致不对齐，并且会扩大容器的高度，这是不希望的。

这是小提琴。

你能帮我找出问题吗？

注意：我使用 CSS 重置，我试过line-height，margin而不是padding但没有运气。

Answer 1

尝试添加line-height: 0;到 div：

#mailing div {
    line-height: 0;
}

尝试还添加：

#mailing .moduletable {
    display: table;
}

更新了 jsfiddle：http: //jsfiddle.net/BbJhE/12/

Answer 2

虽然这可能不是最好的解决方案（因为我必须硬编码 的高度<div id="mailing">）它确实有效并且与 Chrome 和 FF 保持一致

我添加height: 2.4em;到#mailing 和margin:0;到#user_email_formAcymailing1.inputbox

小提琴：http: //jsfiddle.net/BbJhE/11/

Answer 3

尝试删除：

table.acymailing_form {
    margin-top: 2%;
}

Answer 4

尝试为 h3 设置硬线高：

#mailing h3 {
    font:small-caps .95em"Times New Roman", Times, serif;
    letter-spacing:1px;
    text-transform:capitalize;
    text-shadow:0 1px 0 #fff;
    color:#6b6b6b;
    padding:10px;
    margin:0;
    float:left;
    line-height:20px;
}