1

3 つの正方形を垂直方向に揃えようとしています。3 番目の要素は Twitter ウィジェットです。Ubuntu 12.04 を実行していますが、Google Chrome で 2 つの四角形が下にずれているようです。他のすべてのブラウザーは、これを正しくレンダリングしているようです (すべてインラインで)。

空白を削除したり、ソースを詳しく調べたりしましたが、この単純な jsfiddle でも同じ問題があるようです。

調子はどう？

http://jsfiddle.net/bwzGC/

HTML

<div id="info-block">
    <div id="twaewsit-content">
        <span class="header">This Week @ EWSIT</span>
    </div>
    <div id="ue-content">
        <span class="header">Upcoming Events</span>
    </div>
    <div id="twit-content" style="border:none !important;">
        <a class="twitter-timeline" href="https://twitter.com/EWSITGOGREEN" data-widget-id="362066477261680640">Tweets by @EWSITGOGREEN</a>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </div>          
</div>

CSS

#info-block {
    padding:20px 0 20px 0;
    width:100%;
    text-align:center;
}

#info-block > div { 
    height:250px;
    width:30%;
    max-height:250px;
    overflow-y:hidden;
    display:inline-block !important;
    border:1px solid #e8e8e8;

    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

    font:normal normal normal 12px/16px "Helvetica Neue",Arial,sans-serif;
}

#info-block > div > .header {
    display:block;
    padding:8px;
    font-weight:bold;
    font-size:14px;
    text-align:left;
    border-bottom-style:solid;
    border-bottom-color:#e8e8e8;
    border-bottom-width:1px;
}
4

3 に答える 3

2

先日も似たようなものに出会い、原因を少し調べてみました。

Adriftが指摘したように、これは要素によるものvertical-alignですinline-block。具体的には、要素がデフォルトで使用する値と、設定した事実baselineに関連しているようです。inline-blockoverflow-y:hidden

Webkit ブラウザー (Chrome、Safari、Opera 15 ではボックスが押し下げられていることがわかります) と他のブラウザー (Firefox と Opera 12 ではボックスが上に配置されています)vertical-align:baselineとoverflow:hiddenを適用すると、レンダリングの違いがあるようです。css を削除するoverflow-yと、Firefox と Chrome の両方で同じ結果 (ボックスが押し下げられる) が得られます。W3C CSS 2.1 仕様に従って:

「インライン ブロック」のベースラインは、通常のフローの最後のライン ボックスのベースラインです。この場合、ベースラインはマージンの下端です。

したがって、この場合、Gecko は仕様に従ってレンダリングしているように見えますが、Webkit はそうではありません。

于 2013-07-31T01:15:08.360 に答える
2

1つのオプションは、に追加するvertical-align: bottom;ことです#info-block > div

#info-block > div {
    height: 250px;
    width:30%;
    max-height:250px;
    overflow-y:hidden;
    vertical-align: bottom;
}

http://jsfiddle.net/bwzGC/2/

于 2013-07-31T00:28:53.560 に答える
1

残りの 3 つの div をフロートすれば問題ありません

例

#twaewsit-content,#ue-content,#twit-content{
     float:left !important;   
}
于 2013-07-31T00:32:35.020 に答える