CSS邊框渲染優先

Question

我有這個問題，Firefox和IE拒絕在圖像後面渲染邊框，無論我做什麼，而Chrome和Opera都不錯。我已經把包含箭頭的div移到了這個地方，甚至試圖用z-index強制它，但它不會讓步。有什麼建議？

鉻/ Opera和IE/Firefox的：

我有一個的jsfiddle設置在這裏：http://jsfiddle.net/3Lqoxv2r/

CSS：

html { 
    height: 100%; 
    background: #eee; 
} 

body { 
    background: url(../img/background.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
    margin: 0px; 
    height: 100%; 
    overflow: hidden; 
    background-position: center; 
    font-family: Helvetica; 
} 

body.welcome { 
    background: url(../img/welcome_background.jpg); 
    background-size: cover; 
    background-position: center; 
} 

p { 
    margin: 0px; 
} 

::-webkit-scrollbar { 
    width: 1px; 
} 

.wrapper { 
    overflow-y: scroll; 
    height: calc(100% - 90px); 
} 

header { 
    position: static; 
    top: 0; 
    height: 60px; 
} 
header .logo { 
    float: left; 
    width: 256px; 
} 
header .logo .container { 
    padding: 0 0 0 128px; 
    height: 60px; 
    background: white; 
} 
header .logo .container img { 
    margin: 13px 0 0 0; 
    width: 63px; 
    height: 66px; 
    filter: hue-rotate(0deg); 
    -webkit-filter: hue-rotate(0deg); 
    -moz-filter: hue-rotate(0deg); 
    -o-filter: hue-rotate(0deg); 
    -ms-filter: hue-rotate(0deg); 
} 
header .menu { 
    float: left; 
    background: white; 
    width: calc(100% - 256px); 
    height: 100%; 
} 
header .menu nav { 
    float: left; 
} 
header .menu nav ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
header .menu nav ul li { 
    float: left; 
    width: 128px; 
    line-height: 57px; 
    letter-spacing: -2px; 
    text-align: center; 
    font-size: 19px; 
    text-transform: uppercase; 
    color: #8a8a8a; 
    border-top: 3px solid white; 
} 
header .menu nav ul li.active { 
    color: #f05555; 
    border-top: 3px solid #f05555; 
} 
header .menu .container { 
    float: right; 
    padding-right: 128px; 
} 

.before { 
    content: ""; 
    position: absolute; 
    top: 60px; 
    left: 130px; 
    border-top: 23px solid white; 
    border-left: 28px solid transparent; 
    border-right: 28px solid transparent; 
} 

div.content { 
    width: 100%; 
    height: calc(100% - 90px); 
} 
div.content .menu { 
    height: 50px; 
} 
div.content .container { 
    overflow-y: scroll; 
    height: 100%; 
    margin: 0 128px 0 128px; 
    width: calc(100% - 256px); 
    background: white; 
} 

footer { 
    position: static; 
    bottom: 0; 
    height: 30px; 
    background: white; 
    padding: 0 0 0 128px; 
    line-height: 30px; 
    font-size: 10px; 
    color: #8a8a8a; 
} 

Answer 1

您已經使用position: static爲header標籤。相反，使用position: relative，它將在ff和IE11中工作。