Safari - 砖石物体下面没有空间

Question

我似乎无法弄清楚为什么在野生动物园里我的砌体物体下方没有空间。

网站现场：http://leebollu.co.uk/lb-newsite/blog.html

另外，另一点，在我的本地服务器上，刷新的网站堆叠我的砌体盒，任何人都知道这可能是什么？

我的HTML是：

<div id="news-block" class="blog-container">

                            <!--blogpost Item-->
                            <article class="js-fadeup-animate blog-block">
                                <div class="blogpost-item-wrap">

                                <div class="blogpost-item">
                                    <img src="http://placehold.it/350x350">
                                        <div class="blogpost-hover">
                                            <span>
                                                <a href="single.html">VIEW POST</a>
                                            </span>
                                        </div>
                                </div>

                                <div class="blogpost-intro">
                                    <h4>Post 4</h4>
                                    <p>Mus molorpor sam, nustintende eum quo blant vellore, quibus maximodi offic tet, ad que et excepudae sed Mus molorpor sam, nustintende eum quo blant vellore, quibus maximodi offic tet, ad que et excepudae sed</p>
                                </div>

                            </div>
                            </article>
                            <!--blogpost Item-->
</div>

我的css是：

/*Blog-page*/

.blog-container {
    width: 100%;
    height:auto;
}

.blog-block {
    width: 45%;
    height:auto;
    margin-right:5%;    
    margin-bottom: 5%;
}

.blog-block:nth-child(2n)   {
    margin-right:0%;
}

.blogposts {
    width:100%;
    height:auto;
    margin-top:0%;
    margin-bottom:4%;
    padding-top:120px;
}

.blog-intro {
    width:100%;
    height:auto;
    margin-bottom:30px;
    position:relative;
    display:inline-block;
}

.blog-intro h1  {
    margin-bottom:16px;
}

.blog-intro p   {
    margin-right:20px;
    height:20px;
    line-height:14px;
    display:inline-block;
    float:left;

    font-family: 'Raleway', sans-serif;
    font-size:16px;
    color:#404453;
    line-height:24px;
    font-weight:300;
}

.blogpost-item-wrap {
    width:100%;
    height:auto;
}

.blogpost-item  {
    width:100%;
    height:auto;
    float:left;
    position:relative;
}

.blogpost-item img  {
    width:100%;
    position:relative;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -khtml-border-radius: 3px;
    margin-bottom:-3px;
    background-image:url('../images/preloader.gif');
    background-repeat: no-repeat;
    background-position:center; 
}

.blogpost-hover {
    height:100%;
    width:100%;
    background-color: #6cc5fa;
    position:absolute;
    bottom:0;
    opacity:0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -khtml-border-radius: 3px;
    visibility:hidden;
    opacity:0;
}

.blogpost-item-wrap:hover .blogpost-hover   {
    visibility:visible;
    opacity:0.9;

}

.blogpost-hover span    {
    height:auto;
    position:absolute;
    top:44%;
    width:100%;
    display:block;
    text-align:center;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -khtml-border-radius: 3px;

}

.blogpost-hover span p  {
    color:#ffffff;

}

.blogpost-hover span a {
    padding:10px 20px 10px 20px;
    margin-top:10px;
    display:inline-block;
    color:#ffffff;
    text-decoration:none;
    font-family: 'Raleway', sans-serif;
    font-size:12px;
    font-weight:500;
    border:1px solid #ffffff;
    background-color: none;
    text-transform: uppercase;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -khtml-border-radius: 2px;
}

.blogpost-hover span a:hover {
    color:#56697f;
    background-color: #ffffff;
}

.blogpost-intro {
    height:auto;
    width:86%;
    padding:5% 7% 6% 7%;
    background-color: #ffffff;
    display:inline-block;
}

.blogpost-intro p   {
    font-size:14px;
    line-height:19px;
}

.blogpost-intro a:link {
    text-decoration: none;
    color:#f5f6f7;
}

.blogpost-intro a:visited {
    text-decoration: none;
    color:#f5f6f7;
}

.blogpost-intro a:hover {
    text-decoration: none;
    color:#56697f;
}

.blogpost-intro a:active {
    text-decoration: none;
    color:#f5f6f7;
}

.date   {
    font-size:10px;
    line-height:14px;
    margin-top:10px;
}