0

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

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

<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>
4

1 回答 1

0

仅供参考 - Chris Coyier 在此处有一篇关于伪选择器后的文章

浏览器支持小问题：

  • Firefox 3.5- 不允许伪元素的绝对定位。
  • 在 Opera 9.2 中，空白总是显示在这个伪元素中，就好像它是前置文本一样。
  • IE 8 不支持它们的 z-index

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

于 2013-12-26T22:30:01.943 回答