Границы не отображаются в firefox

Question

Вот целевая страница, которую я сейчас делаю http://prototype.uedpro.ru Это в кириллице, не волнуйтесь.

В галерее есть ярлыки с именами фотографий, которые составлены с height: 0 и диагональными границами, которые отображаются в каждом другом браузере сейчас, но не в FF. Я пробовал почти все, и я все еще не могу понять, что случилось. Какие-нибудь советы?

Whole галереи 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:

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

В правиле .trap CSS это нарушает Firefox

filter: url(#drop-shadow); 

Удалите его или закомментируйте его, и они будут показывать вверх.

Кроме того, я не думаю, что вы можете передать селектор, основанный на ID, на url() в CSS, хотя я мог ошибаться.