就像按钮对齐问题一样


Like Button Alignment woes

我目前正在重新设计我的网站布局,并试图将我的类似Facebook的按钮放在页面底部的"Tweet"按钮旁边。。。然而,每个按钮的顶部和底部之间似乎有五个像素的差异,使它们无法对齐。。。我已经尝试过将div的填充和边距设置为0,但这也不起作用。。。

页面可在此处查看:http://www.jameshenry.info/test/video.php?video=14

关于为什么每个按钮的顶部没有对齐,有什么想法吗?

尝试以下

<div class="bottombar">
  <div style="float:left">
    <iframe class="twitter-share-button ......
  </div>
  <div class="float:left">
    <fb:like ........
  </div>
  <div style="clear:both;"></div>
</div>

不幸的是,没有什么可以做的,大小似乎随着每个浏览器的填充和边距而变化。您可以将容器设置为特定的大小,并将溢出设置为隐藏,但随后它会在一个浏览器中切掉部分按钮,而不会在另一个浏览器中将其切掉。

我知道帮不了多少忙,但我不会在上面浪费太多时间

我采用的一种方法是创建一个漂亮的共享按钮,并在悬停时将它们都显示在工具提示中。至少在需要之前,丑陋会被隐藏起来!

希望能有所帮助:)

尝试这个

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
Azari & III - James Henry
</title>
<link href="scripts/page.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class = 'rightbar'>
<div class = 'videobox'>
<iframe src="http://player.vimeo.com/video/28767067?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp" width="640" height="360" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe><BR><div class='video-title'>Azari & III</div><div class='video-subtitle'>Manic (Directors Cut)</div><BR><div class='back'><a href="./">&laquo;back</a></div></div>
</div>
<div class ='bottombar'>
    <div style="margin: 3px 3px 0px 3px; position: relative; float: left;"><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></div>
    <div style="margin: 3px 3px 0px 3px; position: relative; float: left;"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like show_faces="false" layout="box_count" width="75" padding="0" margin="0" font="lucida grande" !important ></fb:like></div>
<div>
</body>
</html>