溢出中断内联显示

Question

所以我有这个奇怪的问题，我在一行（display:inline-block）上有两个div，第一个div出现在滑动效果中。对于这个动画，我需要设置overflow:hidden，但它似乎打破了我的页面。

我在JSFiddle

上做了一个演示

你有没有遇到过这个问题？

谢谢

注意：IE8 +兼容的提示或解决方案将是一个巨大的优势

---

代码

HTML

<div class="container">
    <div class="hello NoOverflow">Hello</div><div class="textWrapper">mytext</div>
</div>
<br>
<div class="container">
    <div class="hello">Hello</div><div class="textWrapper">mytext</div>
</div>

CSS

.container {
    background: #000;
    color: #FFF;
}

.hello {
    display: inline-block;
    width: 40px;
    background: #F00;
}

.textWrapper {
    display: inline-block;
    background: #090;
}

.NoOverflow {
    overflow: hidden;
}

---

修改

对于那些想要悬停动画的人：JSFiddle Updated

您将通过悬停第二个容器看到我的问题（JQuery“animate”调用添加“overflow：hidden”属性）

Answer 1

您需要为内联块子元素指定vertical-align: top。

指定overflow: hidden时，您将触发新的块格式化上下文，其下边缘将与以下内联元素的基线对齐。

请参阅演示：http://jsfiddle.net/audetwebdesign/7SZkN/

要修改的相关CSS是：

.NoOverflow {
    overflow: hidden;
    vertical-align: top;
}

有很多CSS2所以它应该可以在IE8 +（任何支持内联块的浏览器）中正​​常工作。

Answer 2

你有没有试过把它们漂浮起来。

.container {
    background: #000;
    color: #FFF;
}

.hello {
    /*display: inline-block;*/
    float:left;
    width: 40px;
    background: #F00;
}

.textWrapper {
    /*display: inline-block;*/
    float:left;
    background: #090;
}

.NoOverflow {
    overflow: hidden;
}