Safari无法识别负的页顶

Question

I have a fluid width container that has a shadow on the bottom. The margin has a negative top-margin and works fine in FF, Chrome, IE8+, but not in Safari. In theory, I don't think I should even need a negative margin to make the shadow and inner portion stack, but apparently I do. Thoughts?

HTML:

<div class="banner_wrap">
    <div class="inner">
        <div class="icon"></div>
        <div class="text">
            <p>OMG SO COOL, MAN</p>
        </div>
    </div>
    <div class="shadow"></div>
</div>

CSS:

.banner_wrap {
    float: left;
    clear: none;
    width: 100%;
    max-width: none;
    left: auto;
    right: auto;
    height: auto;
    margin-bottom: 15px;
}

.banner_wrap .inner {
    height:auto;
    display:inline-block;
    width:100%;
    overflow:hidden;
    position:relative;
}

.banner_wrap .shadow {
    background: url(../shadow.png) 0 0 no-repeat;
    height:12px;
    background-size:100% 12px;
    position:relative;
    margin-top:-5px;
}

Answer 1

1. solution

add vertical-align property and remove negative margin

.banner_wrap .inner {
    height:auto;
    display:inline-block;
    width:100%;
    overflow:hidden;
    position:relative;
    background: #ddd;
    vertical-align: top; /*this line*/
}

example 1

2. solution

replace inline-block to block and remove negative margin

.banner_wrap .inner {
    height:auto;
    display:block;
    width:100%;
    overflow:hidden;
    position:relative;
    background: #ddd;
}

example 2