Question

我无法阻止div的内容泄漏。它似乎与Foundation的CSS有关，但我无法弄清楚是什么导致了它。删除Foundation CSS后，它可以正常工作。

我真的很欣赏另一双眼睛。

HTML：

<div class="grid-box round isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px);">

        <h5>Title</h5>

        <p>Lorem ipsum</p>        

        <div class="meta round">
            <div class="avatar">
                <a href="#">
                    <img src="http://fakeimg.pl/46x46" width="46" height="46" alt="Username">
                </a>
            </div>
            <div class="user">
                <a href="#">
                    Kyle
                </a>
            </div>
            <div class="stats">
                <ul>
                    <li class="likes"><i class="icon-thumbs-up"></i>12</li>
                    <li class="saves"><i class="icon-pushpin"></i>1</li>
                    <li class="comment_count"><i class="icon-comments"></i>1</li>
                </ul>
            </div>
        </div>

    </div>

CSS：

.grid-box {
    position: relative;
    background-color: #ffffff;
    width: 300px;
    margin: 10px;
    float: left;
    padding: 10px;
    border: 1px solid #DDD;
    -webkit-box-shadow: 1px 1px 1px 0px #999; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    box-shadow: 1px 1px 1px 0px #999; /* Opera 10.5, IE9+, Firefox 4+, Chrome 6+, iOS 5 */
    -webkit-border-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
    border-radius: 6px; /* Opera 10.5, IE9+, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ */

    /* useful if you don't want a bg color from leaking outside the border: */
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

#grid-container {
    margin: 0 auto;
}

div.round {
    -webkit-border-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
    border-radius: 6px; /* Opera 10.5, IE9+, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ */

    /* useful if you don't want a bg color from leaking outside the border: */
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

.actions {
    float: left;
    position: relative;
    left: 50%;
}

.actions .button-group {
    float: left;
    position: relative;
    left: -50%;
}

.actions .button-group a {
    text-shadow: 1px 1px 1px #000; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
}

.meta {
    background: #F0F0F0;
    border: 1px solid #DDD;
    padding: 10px;
    height: 48px;
}

.meta > .avatar {
    float: left;
    margin-right: 10px;
    width: 46px;
    height: 46px;
}

.meta > .user {
    line-height: 16px;
    padding-bottom: 10px;
    overflow: hidden;
}

.meta > .stats ul {
    list-style: none;
    margin-bottom: 0;
    line-height: 14px;
}

.meta > .stats li {
    color: #777;
    display: inline-block;
    line-height: 14px;
    width: auto;
    margin-right: 19px;
    border: none;
}

.meta i {
    font-size: 18px;
}

Answer 1

问题是您将显式高度设置为.meta。删除那个高度，它工作得很好。

Answer 2

将height:auto;放入div.round CSS

以下是您的jsFiddle http://jsfiddle.net/UR5t9/1/

的更新

即

    div.round {
      height:auto;
      -webkit-border-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
      border-radius: 6px; /* Opera 10.5, IE9+, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ */

      /* useful if you don't want a bg color from leaking outside the border: */
      -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
    }

防止div内容泄漏

2 个答案: