Question

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

似乎列表项背景颜色堆叠在箭头边框的顶部，因此无法看到，因为如果我关闭背景颜色，我可以看到箭头。我认为这可能是一个z索引问题，但这也无济于事。我还在IE中注意到所有的：在样式被划掉后，任何想法？

<html>
<head>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<style type="text/css">
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;
}
</style>
</head>
<body>
<ul class="nav inline registration-nav capitalize">
  <li class="register arrow active">Register</li>
  <li class="books arrow">Books</li>
  <li class="checkout">Checkout</li>
</ul>

</body>
</html>

Answer 1

仅供参考 - 克里斯·科伊尔有一篇关于后伪选择者的文章here

浏览器支持小问题：

Firefox 3.5-不允许伪元素的绝对定位。
在Opera 9.2中，空格总是显示在此内伪元素，好像它是预文本。
IE 8不支持z-index

所以这很可能是你的问题。

CSS - 三角形边框无法正确渲染IE8

1 个答案: