0

我有一个由 Susy 构建的 9 个图像的 3x3 矩阵。我只是想知道为什么垂直排水沟的行为不像我建议的那样。然后我意识到包含 cboxElement https://dl.dropbox.com/u/8578/cbox.png

大于包含的图像： https ://dl.dropbox.com/u/8578/img.png

但老实说，我不知道为什么 cboxElement 被拉伸得比图像扩展得大？！cbox 的配置如下所示：

    $(".ajax1, .ajax2, .ajax3, .ajax4, .ajax5, .ajax6, .ajax7, .ajax8, .ajax9").colorbox({
        rel:"nofollow",
        transition:"none", 
        opacity:"0",  
        fixed:"true", 
        width:"65%", 
        height:"97%",
        onComplete: function() {$('.flexslider').flexslider({
            animation: "slide",
            animationLoop: true,
            controlNav: false,
            directionNav: true,
            slideshow: false
        });}        
     });

无序列表中一个 li 的 html 看起来是这样的：

 <li><a class="ajax1" href="projekt1.html"><img title="Projekte1" src="img/projekteblur.jpg" alt="Projekte1" /><img title="Projekte1" src="img/projekte.jpg" alt="Projekte1" /><span class="spiceup">Zum Projekt</span></a></li>

应用的 CSS 看起来是这样的：

 /* The following CSS is consistent between example themes and should not be altered. */
#colorbox, #cboxOverlay, #cboxWrapper{
    position:absolute;
    top:0;
    left:0;
    z-index:300;
    overflow:hidden;
    }
 #cboxOverlay{
    position:fixed;
    width:100%;
    height:100%;}
  #cboxMiddleLeft, #cboxBottomLeft{
    clear:left;}
  #cboxContent{
    position:relative;}
  #cboxLoadedContent{
    overflow:auto;}
  #cboxLoadingOverlay, #cboxLoadingGraphic{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;}
  #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{
    cursor:pointer;}
  #colorbox, #cboxContent, #cboxLoadedContent{
    box-sizing:content-box;}

/*  User Style:   */

#colorbox{
    @include border-radius(5px, 5px);
    @include box-shadow(black 2px 2px 10px);
    background:rgba(55, 60, 74, 0.95);
    }
 #cboxContent{
    margin:30px;
    overflow:visible;
    }
  #cboxError{
        padding:50px;
        border:1px solid #ccc;}
  #cboxLoadedContent{
        padding:0 5px 0 10px;
        }
    #cboxLoadingGraphic{
        background:url('../img/loading.gif') no-repeat center center;}
    #cboxLoadingOverlay{
        background:rgba(55, 60, 74, 0.95);}

   #cboxClose{
    text-indent:-9999px;
    width:44px;
    height:24px;
    position:absolute; 
    top:-26px;
    right:-20px; 
    background:url('../img/close.png') no-repeat 0 0;}

有人有想法吗？谢谢

4

1 回答 1

0

您可以从此等式中删除颜色框，因为它在这里没有影响。这只是 CSS 琐事，默认情况下会发生在所有图像元素上，因为它们是内联元素。如果您将图像元素更改为display:block或给它一个浮点数，该空间将消失。

至于有空格的原因，这篇文章解释的很好： 删除图片下方的空白

于 2012-10-29T05:38:20.357 回答