CSS：Safari 的边距问题答案

【问题标题】：CSS: Margin problem with SafariCSS：Safari 的边距问题
【发布时间】：2011-03-24 02:01:34
【问题描述】：

在site I'm working on 上，出于某种原因，Safari 的边距需要与 FF、IE8、Chrome 和 Opera 不同？我有一个链接，我想在标签旁边排成一行。除了需要 12 像素差异的 Safari 之外，它的排列都很好。这是一个更好地描述问题的屏幕截图：Click

Safari 屏幕截图显示标签过低。这是我用于工作的 4 个浏览器的 CSS：

.submitter a {
    float: right;
    margin: -2px 0 0 2px;
    padding: 0 !important;
}

这是适用于 Safari 的代码，但是，使用它会将链接向上抛出 12 个像素。

.submitter a {
    float: right;
    margin: -14px 0 0 2px; Works in Safari & Chrome
    padding: 0 !important;
}

任何人都可以对此有所了解吗？ TIA

【问题讨论】：

请注意，它也发生在 Ubuntu 下的 Chrome 10 上。

标签： css safari margins

【解决方案1】：

这似乎解决了：

.submitter a {
    float: none;
    display: inline !important;
    margin: 0 0 0 2px;
}

由于对级联的无意义使用，其中确实非常令人费解。

由于选择器，某些规则被应用于实际上不应该应用的元素，例如：

.box_777 ul li a

你最好用类似的东西替换那个选择器：

.individual-likes > a

但是，很难预测改进选择器将如何改变页面的显示方式。

【讨论】：

这成功了Thirtydot。谢谢。我完全同意卷积。终于比小调整更深入地学习 CSS，所以这是我的“学习网站”，哈哈。
没问题。只是为了确定，您尝试了哪些浏览器？我只在 Firefox 和 IE8 中测试过。
到目前为止，我已经在 Win7 x64 上测试了 FF3（最新）、IE8、Opera 11 和 Safari 5 中的修复程序。正如前面提到的@bstruthers 和@derek hunziker，我还没有在Ubuntu 或IE7 中检查Chrome 10。

【解决方案2】：

它上升的原因可能是因为 - 像素值。它们是否正确嵌套在 div 中？您是否为 Chrome 按钮应用了相同的对齐方式（CSS、Html 等）？

【讨论】：

【解决方案3】：

发生了很多事情，但您可以尝试以下方法之一：

.submitter .smalltext { float: left; }

（或）

在“smalltext”跨度之前移动“follow”锚标记

【讨论】：

【解决方案4】：

查看该站点，锚点被.box_777 ul li a 设置为block，然后由.submitter a 向右浮动。

如果我删除 display: block; 和 float: right; 东西对齐。

【讨论】：