Question

我有一个流体宽度的容器，底部有一个阴影。保证金的上限为负，在FF，Chrome，IE8 +中运行良好，但在Safari中则不行。从理论上讲，我不认为我甚至需要一个负边距来制作阴影和内部部分，但显然我做了。想法？

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。溶液

添加vertical-align属性并删除负边距

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

example 1

<强> 2。溶液

替换内联块以阻止并移除负边距

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

example 2

Safari不承认负利润率

1 个答案: