탐험 경로 오버플로 문제

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/

이 문제는 테두리 및 높이를 사용하여 삼각형을 사용하여 삼각형을 사용하고 있기 때문에 의사 요소는 매우 커야합니다. 오버플로 설정 : 숨겨진이 문제가 남은 것입니다. 페이지에서 한 줄로 탐색 경로가 스팬이 발생하면 문제가 발생합니다.

나는 왜곡을 사용할 수 있지만 IE8에서는 작동하지 않을 것입니다.

Answer 1

http://jsfiddle.net/kgnb/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;
}

.