테두리가 파이어 폭스에 표시되지 않습니다.

Question

여기 제가 지금 방문하는 방문 페이지입니다. http://prototype.uedpro.ru 키릴 문자로되어 있으므로 걱정하지 마십시오.

갤러리에는 사진 이름이 height: 0으로되어 있고 대각선 테두리가 다른 모든 브라우저에 표시되지만 FF에는 표시되지 않는 레이블이 있습니다. 나는 거의 모든 것을 시도했지만 여전히 잘못된 것을 파악할 수는 없습니다. 어떤 팁?

전체 갤러리의 CSS :

.thumbwrap { 
    width: 472px; 
    height: 314px; 
    margin: 6.5px auto; } 

.thumbwrap img { 
width: 100%; } 

.trap { 
    -moz-box-sizing: border-box; 
    height: 0; 
    width: 485px; 
    border-top: 32px solid #3d4344; 
    -moz-border-top: 32px solid #3d4344; 
    -o-border-top: 32px solid #3d4344; 
    border-left: 32px solid rgba(0,0,0,0); 
    -moz-border-left: 32px solid rgba(0,0,0,0); 
    -o-border-left: 32px solid rgba(0,0,0,0); 
    border-right: 32px solid rgba(0,0,0,0); 
    -moz-border-left: 32px solid rgba(0,0,0,0); 
    -o-border-left: 32px solid rgba(0,0,0,0); 
    position: relative; 
    -moz-transform: scale(.9999); 
    -webkit-filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.42)); 
    filter: url(#drop-shadow); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0,  OffY=1,Color='#000')"; 
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=1,Color='#000')"; 
    behavior: url('../stylesheets/PIE.htc');} 

#trap1 { 
    height: 0; 
    width: 245px; 
    border-top: 32px solid #3d4344; 
    -moz-border-top: 32px solid #3d4344; 
    -o-border-top: 32px solid #3d4344; 
    border-left: 32px solid rgba(0,0,0,0); 
    -moz-border-left: 32px solid rgba(0,0,0,0); 
    -o-border-left: 32px solid rgba(0,0,0,0); 
    border-right: 32px solid rgba(0,0,0,0); 
    -moz-border-left: 32px solid rgba(0,0,0,0); 
    -o-border-left: 32px solid rgba(0,0,0,0); 
    position: relative; 
    -moz-transform: scale(.9999); 
    behavior: url('../stylesheets/PIE.htc'); 
    -moz-box-sizing: border-box; 
} 

#trap1 span { 
left: 50px; 
top: -25px; 
font-size: 15px; } 

#trap2 span { 
top: -26px; 
right: 0; 
font-size: 12px; } 

.thumbpad span { 
position: absolute; 
top: -29px; 
right: -5px; 
color: #b4dbe1; 
font-size: 10px; } 

.activepad { 
    background-color: #FFFFFF !important; 
    z-index: 9999 !important; } 

.activetrap { 
    width: 245px !important; 
    border-top: 32px solid #FFFFFF !important; 
    -moz-border-top: 32px solid #FFFFFF !important; 
    -o-border-top: 32px solid #FFFFFF !important; 
    -moz-box-sizing: border-box; 
    /* behavior: url('../stylesheets/PIE.htc'); */} 

    .activespan { 
    color: #000000 !important; 
    left: 55px; 
} 

JS 다음 .trap CSS 규칙에서

var zindex = 7; 
var thumbs = $('.thumbpad'); 
var i = 8; 
var margin = 1; 
$('.thumbpad').each(function(){ 
    $(this).css('z-index',i); 
    i-=1; 
     }); 

for (i = 5; i < thumbs.length; i++) { 
    $(thumbs[i]).css('width',$(thumbs[i]).width() + 2).css('top',-margin); 
} 


$('.thumbpad').hover(function(){ 
    if (!$(this).hasClass('activepad')) { 
     var prev = $(this).prevAll(); 
     var next = $(this).nextAll(); 
     var index = $(this).index()+1; 
     var i =index; 
     var j = index; 
     $(prev).each(function(){ 
     $(this).css('z-index',i-1); 
     $(this).find('.trap').css('width','245px'); 
     $(this).find('span').css('left','0'); 
     }); 
    _.each($(prev).toArray().reverse(),function(){ 
      $(this).css('z-index',i-1); 

     }); 
     removeWhite($('#first_thumb')); 
     addWhite($(this)); 
    } 
},function(){ 
    if ($(this).hasClass('activepad')) { 
     var prev = $(this).prevAll(); 
     var i = 8; 
     $('.thumbpad').each(function(){ 
      $(this).find('.trap').removeAttr('style'); 
      $(this).find('span').removeAttr('style').css('right','-5px'); 
      $(this).css('z-index',i); 

      i-=1; 
     }); 
     removeWhite($(this)); 
     addWhite($('#first_thumb')); 

    } 
}); 

function addWhite (pad) { 
    $(pad).addClass('activepad'); 
    $(pad).find('.trap').addClass('activetrap'); 
    $(pad).find('span').addClass('activespan'); 
} 

function removeWhite (pad) { 
    $(pad).removeClass('activepad'); 
    $(pad).find('.trap').removeClass('activetrap'); 
    $(pad).find('span').removeClass('activespan'); 
} 

Answer 1

이 파이어 폭스

을 깨는

filter: url(#drop-shadow); 

그것을 제거하거나 주석과가 표시됩니다 쪽으로.

또한 CSS에서 url()에 ID 기반 선택기를 전달할 수 있다고 생각하지 않습니다. 잘못된 것일 수 있습니다.