1

我试图保持三个正方形垂直对齐。第三个元素是一个 twitter 小部件。我正在运行 Ubuntu 12.04，这两个方块似乎在 google chrome 中向下移动。所有其他浏览器似乎都正确地呈现了这一点（它们都是内联的）。

我试过删除空白，深入研究我的源代码等，但即使是这个简单的 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

一种选择是添加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 回答
2

前几天我遇到了类似的事情，并稍微调查了原因。

正如Adrift指出的那样，这是由于vertical-align元素的inline-block原因。具体来说，它似乎与元素默认使用的baseline值inline-block以及您也overflow-y:hidden设置的事实有关。

vertical-align:baselineWebkit 浏览器（我看到 Chrome、Safari 和 Opera 15 中的框被向下推）和其他浏览器（Firefox 和 Opera 12 的框与顶部对齐）在应用时似乎存在渲染差异overflow:hidden。删除overflow-ycss 在 Firefox 和 Chrome 中给了我相同的结果（框被按下）。根据W3C CSS 2.1 规范：

'inline-block' 的基线是其在正常流中的最后一个行框的基线，除非它没有流入行框，或者它的 'overflow' 属性具有除 'visible' 之外的计算值，在在这种情况下，基线是底部边距边缘。

因此，在这种情况下，Gecko 似乎按照规范进行渲染，而 Webkit 则不是。

于 2013-07-31T01:15:08.360 回答
1

浮动左边的3个div，你会没事的

例子

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