12

CSS:

.share {
    width: 150px;
    height: 20px;
    background: #000;
    float: right;
    white-space: nowrap;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 3px;
    background-color:rgba(255, 255, 255, 0.5);
    border-bottom-left-radius: 5px;
    box-shadow: 0px 0px 10px #888;
    vertical-align: top;
}

HTML:

<div class="share">
    <div class="fb-like" data-href="http://bronies.info/" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true" style="width:47px; overflow:hidden; top:-3px; left:3px;"></div>
    <a href="https://twitter.com/share" class="twitter-share-button" data-text="Wondered what the bronies were all about?" data-count="none">Tweet</a>
    <div class="g-plusone" data-size="medium" data-annotation="inline" data-width="300" style="width:32px; overflow:hidden;"></div>
</div>

クロム、サファリ:

クロームとサファリ

Internet Explorer、Firefox、Opera:

Internet Explorer、Firefox、Opera

私が HTMLstyleプロパティで行ったことを確認できる場合は、 を使用top:-3pxしました。他のブラウザーで Web サイトをテストする前にこれを行いました (Chrome は私の主要な Web ブラウザーです)。私が使用topしたのは、簡単な Google 検索でそうするように指示するページが表示されたからです。このソリューションが機能しない場合、どのように調整してすべての Web ブラウザーで動作するように調整しますか?

4

10 に答える 10

10

完全に削除する必要がありtop:-3px;ます。position:relative;ポジショニングを有効にするために必要な ( 以外のもの)がないためstatic、Webkit (Chrome、Safari) は正しく無視していますが、Internet Explorer、Firefox、および Opera は誤ってそれを受け入れています (-3px シフト)。

編集：

コメントから...
Facebook のスクリプトは、<span>あなたの内部にを追加し、<div>それが提供する CSS ルールをトリガーします: .fb_iframe_widget span { vertical-align: text-bottom; }. 共通のフロー (またはベースライン) を共有しないように、float: left;3 つのタグすべてに追加することをお勧めします。<div>

于 2012-09-15T05:14:44.717 に答える
3

使用top: autoして結果を見て、すべてのブラウザで同じ位置にあるかどうかを確認してください。仮想的に調整する必要がある場合は、bottom: 3px;（またはニーズに合った適切な値）を使用します

  • position:relative; を忘れないでください。あなたのコードに

したがって、Facebook ボタンの最終的なスタイルは次のようになります。

width:47px; overflow:hidden;position:relative; top:auto;  bottom:3px; left:3px;
于 2012-09-15T05:29:56.247 に答える
1

display: inline-block;Facebookボタンのvertical-align: middle;コンテナに使用することをお勧めします...

于 2012-09-15T05:17:44.380 に答える
1

各ボタンを囲むように (Facebook の機能に合わせて)追加vertical-align: text-bottom;したところ<span>、すべてが Chrome、Firefox、IE で完全に一致しました。（それが重要な場合は、私のスパンにもありますdisplay: inline-block。）

于 2013-01-11T08:11:45.113 に答える
1

これを「共有」divに追加してみてください。他のブラウザでどのように見えるかはわかりませんが、Chrome ではうまくいっているようです。

font-size: 0.1px;
于 2014-02-11T22:19:15.247 に答える
0

各ボタンを独自のdivにラップし、divを次のように設定することになりました

display:inline-block; white-space: nowrap; vertical-align:top;

次に、facebook 固有の div に以下を追加しました。

#facebookButton > div > span {vertical-align:baseline;}
于 2013-04-23T09:45:12.607 に答える