6

我有一个非常具体的问题，因为我正在尝试使用没有图像或 JavaScript 的纯 CSS 创建具有角度的导航。我已经弄清楚它可以完美运行，但我遇到的问题是 IE 9 和 Chrome 看起来不同。我可以通过更改伪元素的边距来让两者都工作，但我更喜欢一个解决方案来同时工作。如果有人能弄清楚为什么边距不同，并给我一个单一的 CSS 解决方案，可以在两种浏览器中工作，那就太好了。否则我将不得不为 IE 添加一个单独的类并强制它使用单独的 CSS 条目工作。

这是与箭头导航一起使用的jsfiddle

这是HTML

<ul>
    <li><a href="#" >Some Navigation</a></li>
    <li><a href="#">More navigation</a></li>
    <li><a href="#">Another Nav</a></li>
    <li><a href="#">Test Nav</a></li>
    <li><a href="#">A Test Navigation</a></li>
</ul>

CSS

ul {
    float:right;
    list-style-type:none;
    margin:0;
    padding:0;
    width: 300px;
}
ul li a {
    float:left;
    width:300px;
}
ul li{
    float:left;
    width: 300px;
    height:50px;
    line-height:50px;
    text-indent:10%;
    background: grey;
    margin-bottom:10px;
    border:1px solid black;
}
ul li:before {
    content:"";
    position:absolute;
    margin-top:-1px;
    border-top: 26px solid transparent;
    border-bottom: 26px solid transparent;
    border-right: 21px solid black;
    margin-left:-22px;
}
ul li:after {
    content:"";
    position:absolute;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-right: 20px solid grey;
    margin-left:-320px;
}
4

2 回答 2

8

您可以通过在伪元素上使用绝对定位来解决此问题。为了使其正常工作，请将位置设置ul li为相对（这将导致绝对定位在其中的元素相对于 li）。然后，更新要使用的伪元素的位置，left而不是margin-left：

ul li{
    position: relative; // Add this.
    float:left;
    width: 300px;
    height:50px;
    line-height:50px;
    text-indent:10%;
    background: grey;
    margin-bottom:10px;
    border:1px solid black;
}
ul li:before {
    content:"";
    position:absolute;
    margin-top:-1px;
    border-top: 26px solid transparent;
    border-bottom: 26px solid transparent;
    border-right: 21px solid black;
    left:-22px; // Update from margin-left to left
}
ul li:after {
    content:"";
    position:absolute;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-right: 20px solid grey;
    left:-20px; // Update from margin-left to left
}

http://jsfiddle.net/ryanbrill/jSdWR/5/

于 2013-04-23T16:25:52.460 回答
0

您需要指定元素的位置（例如top和left值）。出于某种原因，我不完全理解 - 添加position: relative到li（不是ul）：

http://jsfiddle.net/jSdWR/4/

于 2013-04-23T16:24:18.187 回答