css - Chrome/Safari 中的边距（或填充不确定）问题

Question

这是我的链接（请注意，它有自动播放音频 - 抱歉......！）

它不是通常的“在 FF 中看起来不错但在 IE 中很糟糕”的问题:)

它在 IE6/7 Firefox 中看起来不错，但在 Chrome 和 Safari 中，它在边距/填充或定位方面存在很大问题。（这缩小了范围吧？）

如果你看看你会明白我的意思。看起来我可能与我的 CSS 规则之一发生冲突，但是这不会在所有浏览器中始终导致问题吗？

任何帮助和指点都将不胜感激。谢谢你。

编辑：不确定为什么我的 reset.css 规则没有生效......

score 4 · Accepted Answer

<h4>问题是内部product-panel-content <div>s的边距顶部。

修改以下样式site.css：

.product-panel-content h4 {
    font-size:140%;
    letter-spacing:-0.5px;
}

成为：

.product-panel-content h4 {
    font-size:140%;
    margin-top:0;
    letter-spacing:-0.5px;
}

将修复基于 WebKit 的浏览器（例如 Safari 和 Chrome）中的显示问题。我不确定这是否会导致您的其他浏览器出现其他显示问题，但如果确实如此，请尝试使用padding-topon<h4>来补充该元素的间距不足。

score -1 · Accepted Answer

Chrome 与任何其他浏览器的不同之处在于它采用指定的元素宽度并添加填充以获得最终宽度。而其他浏览器使用填充来分隔内部内容并保持元素的指定宽度。铬在那艘船上掉了下来。

2 回答 2