Facebook喜欢按钮位置问题

Question

我有问题。我正在重新设计一个网站，我正在使用 HTML5 + CSS3。我正在制作一个带有喜欢和关注按钮的栏。我通常处理无序列表，其中 ul 的高度为 20px，每个子 li 元素具有相同的 20px 高度和 float:left。然后，我在单独的 li 中插入 div.fb-like 和关注按钮。

我遇到的问题是，在 Windows 中，类似按钮在 IE9、Firefox 和 Opera 上向下移动 6px，但在 Chrome 和 Safari 上运行良好（所有浏览器都是最新的）。我尝试使用 jquery css 修复，效果很好，但后来我在 Chrome 上的 Macbook 上打开了该网站，它在 6px 移动时遇到了同样的问题。

以前我制作了另一个页面，其中使用了几乎相同的条形布局，但它使用的是 XHTML 1.1 Transitional。由于某种原因，它没有这个问题。

我使用的是 HTML5 版本的 Like 按钮。

您可以在此处查看演示：http://yucatan.travel.zebradm.mx/prueba.php

Answer 1

你在某处有一个垂直对齐的文本底部：

.fb_iframe_widget span {
position: relative;
display: inline-block;
vertical-align: text-bottom;
text-align: justify;
}

删除它，它会对齐