仅在 Chrome 中的额外填充答案

【问题标题】：Extra padding only in Chrome仅在 Chrome 中的额外填充
【发布时间】：2013-07-16 04:44:06
【问题描述】：

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

在 Chrome 中预览：

在其他浏览器中预览：

Chrome 中的这种额外填充会导致错位并扩大容器的高度，这是不受欢迎的。

Here's the fiddle。

你能帮我找出问题吗？

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

【问题讨论】：

您是否使用了 CSS 重置？
@Diodeus 是的！我在实际样式 css 之前加载 CSS 重置
从技术上讲，Chrome 不再使用 Webkit（它有自己的版本，称为 Blink）。
@j08691 好的... webkit 标记已删除
您使用的是哪个重置？在带有reset.css的本地主机上的测试示例中，我没有得到空间。试试我的reset.css 或查看fiddle

标签： html css google-chrome

【解决方案1】：

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

#mailing div {
    line-height: 0;
}

尝试同时添加：

#mailing .moduletable {
    display: table;
}

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

【讨论】：

并非如此。我在 Chrome 中仍然遇到同样的问题。您可以在 FF 中比较您的小提琴并查看差异。
非常有前途。需要运行一些测试并返回接受与否。

【解决方案2】：

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

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

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

【讨论】：

表格在FF中消失了。我没有看到输入或按钮。
哦，是的.. 这不起作用，因为如果您重新调整面板的大小，输入和按钮将向下移动到下一行。对高度进行硬编码会隐藏输入，抱歉，我会尝试考虑其他内容。
我是这么认为的...感谢您的尝试

【解决方案3】：

尝试删除：

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

【讨论】：

是的。这也有影响。我在接受答案之前尝试过。

【解决方案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;
}

【讨论】：

我仍然得到与我的 OP 的图像 1 相同的行为。尝试选择文本，您会看到额外的填充。这不会发生在任何其他浏览器中。