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：

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的选择器传递给CSS中的url（），尽管我可能错了。

边框不会出现在Firefox中

1 个答案: