ブレッドクラムオーバーフローの問題

Question

CSS3ブレッドクラムチュートリアルを見つけて、（チュートリアルバージョンは同じ問題を抱えていますが）、ブレッドクラムが新しい回線に入った場合は、オーバーフローを使用して誤って失敗することがわかりました。疑似要素を非表示にするには...

HTML

<ul class="crumb">
    <li><a href="#">Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
    <li><a href="#">..Crumbs</a></li>
</ul>

.

CSS

.crumb {
    list-style: none; 
    overflow: hidden;
    margin-bottom: 3px;
}
.crumb li {
    line-height: inherit;
}
.crumb li a {
    color: white;
    text-decoration: none; 
    padding: 0 0 0 20px;
    background: #777;
    position: relative; 
    display: block;
    float: left;
    border: solid 2px #777;
    font-size: 10px;
}
.crumb li a:after { 
    content: " "; 
    width: 0; 
    height: 0;
    line-height: 0;
    border-top:25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 15px solid #777;
    position: absolute;
    top: 50%;
    margin-top: -25px; 
    left: 100%;
    z-index: 2; 
}   
.crumb li a:before { 
    content: " ";
    width: 0; 
    height: 0;
    line-height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 15px solid white;
    position: absolute;
    top: 50%;
    margin-top: -25px; 
    margin-left: 2px;
    left: 100%;
    z-index: 1;
}
.crumb li:first-child a {
    padding-left: 8px;
}
.crumb li a:hover { 
    border-color: black;
    background: black;
}
.crumb li a:hover:after { 
    border-left-color: black !important;
}
.crumb li:last-child a:hover:after { 
    border-left-color: #e67e22 !important;
}
.crumb li:last-child a:after { 
    border-left-color: #e67e22 !important;
}
.crumb li:last-child a {
    border-color: #e67e22;
    background: #e67e22; 
}

.

これは、... http://jsfiddle.net/kggnb/40/

私はこれを修正するためにCSSを変更しようとしましたが、それらをより狭くすることなく疑似要素を変更する方法は見えないようですが、これはまた非常に先向きの点を持つことを意味します。

HTMLはサーバー上でレンダリングされています。これを考えることができる最善の解決策は、レンダリングされる前にいくつかの小切手になっていることがあります。新しいリストとそれがその幅に当たるたびに始まります。

他の考え方が点のための画像を使ってきたのは、同僚が現れていたが、これが可能な場合はCSS修正を貼り合わせるほうがいい。

他のアイデア/修正？

ありがとう。

更新 - 申し訳ありませんが、明確にします。矢印がまったく表示されたくない、パン粉の正しいバージョンはこのようになります。 http://jsfiddle.net/kggnb/49/

問題は、TRIANGLEに望んでいるポイントのため、CSS3に三角形を作るための境界＆高さを使用しています。疑似要素はかなり大きくなければならず、オーバーフローを設定します。ブレッドクラムがページ上の1行の上にスパンすると、問題が発生します。

スキューを使うことができましたが、IE8では動作しません。

Answer 1

http://jsfiddle.net/kggnb/50/

矢印を小さくするだけで、ここに変更があります：

.crumb li a:after { 
    ....
    border-top:9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 9px solid #777;
    ....
    top:-2px;
}   
.crumb li a:before { 
    ....
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 9px solid white;
    ....
    top:-2px;
}

.