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

Question

my inline-block elements are vertically aligning differently in Safari than Chrome and Firefox.

Here in Safari they line up as so:

On chrome and firefox I get the desired results:

Not so sure as to why.

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;
}

Any help would be appreciated, thanks :)

Answer 1

Use vertical-align: bottom; as vertical-align: baseline; is the default and causes issues in Safari. Floats is a different solution and not necessary here unless you prefer that technique. I prefer inline-block for this scenario and use it most of the time.