内联块元素在Safari中不垂直对齐

Question

我的inline-block元素在Safari中的垂直对齐方式与Chrome和Firefox不同。

在Safari这里排队如下：

在chrome和firefox上，我得到了预期的结果：

不确定原因。

HTML：

<div id="image_links">
            <div id="image_links_container">
                <div class="image_link"><a href="/programs/default/index"> <img src="/images/layout/whistle.png" height="75px">
                    <span>Programs</span></a></div>
                <div class="image_link"><a href="/pages/index/Referal%20Rewards"> <img src="/images/layout/trophy.png" height="125px">
                    <span>Referal Rewards</span></a></div>
                <div class="image_link"><a href="/events/default/index"> <img src="/images/layout/hockey_sticks.png" height="125px">
                    <span>Events</span></a></div>
                <div class="image_link"><a href="/client_registration"> <img src="/images/layout/puck.png" height="75px">
                    <span>Register Now</span></a></div>                     
            </div>
       </div>

CSS;

.image_link{
    display: inline-block;
    height:200px;
    vertical-align:baseline !important; 
}
#image_links_container{
    width:1200px;
    margin:0 auto;
    text-align:center;
    padding-top:30px;
    overflow:hidden;

}
#image_links_container a{
    padding: 0 60px;
    position:relative;
    text-decoration:none;

}
#image_links_container a img{
    width: 140px;
    overflow: hidden;    
}
#image_links_container a span{
    position:absolute;
    padding:5px;
    color: #FFF;
    text-transform: uppercase;
    bottom:-55px;
    left:50%;
    margin-left: -100px;
    width:200px;
    height: 31px;
    background-color: rgb(70,70,70);
    font-family:open_sansbold;
    font-size: 160%;    
}
#image_links{
    clear:both;
    position:relative;
    width:100%;
    height:250px;
    background-image: url("/images/layout/default_banner.jpg");
    overflow: hidden;
}

感谢任何帮助，谢谢：）

Answer 1

使用vertical-align: bottom;作为vertical-align: baseline;是默认设置，会导致Safari出现问题。 Floats是一个不同的解决方案，除非您更喜欢这种技术，否则不需要。我更喜欢这种情况的内联块，并且大部分时间都使用它。