html对象下边框呈三角形,html5 - CSS-三角形边框无法正确呈现IE8 - 堆栈内存溢出...

我有一个水平导航栏，在列表项的前面和之后插入了三角形边框，以使其看起来好像列表项的右侧有白色带边框的点。 它是在FF和Chrome中呈现的，而不是IE8，并且我使用的是html5 doctype，并且包含了html5.js。

好像列表项background-color堆叠在箭头边框的顶部，所以看不到它，因为如果我关闭background-color，我就能看到箭头。 我认为这可能是z-index问题，但这也无济于事。 我还在IE中注意到，所有：after样式都被划掉了，有什么想法吗？

ul.registration-nav {

float: left;

margin-bottom: 45px;

width: 100%;

}

ul.registration-nav li {

background-color: #afafaf;

color: #FFFFFF;

display: block;

float: left;

font-weight: 600;

padding: 10px 0;

position: relative;

text-align: center;

text-decoration: none;

width: 33%;

}

ul.registration-nav li.arrow:after {

content: " ";

display: block;

width: 0;

height: 0;

border-top: 20px solid transparent;

border-bottom: 20px solid transparent;

border-left: 15px solid #afafaf;

position: absolute;

top: 50%;

margin-top: -20px;

left: 100%;

z-index: 2;

}

ul.registration-nav li.arrow:before {

content: " ";

display: block;

width: 0;

height: 0;

border-top: 24px solid transparent;

border-bottom: 24px solid transparent;

border-left: 18px solid white;

position: absolute;

top: 50%;

margin-top: -24px;

margin-left: 1px;

left: 100%;

z-index: 1;

}

ul.registration-nav li.checkout {

background-color: #cecece;

}

ul.registration-nav li.active {

background-color: #067673;

}

ul.registration-nav li.active:after {

border-left: 15px solid #067673;

}

• Register
• Books
• Checkout