2

とりあえず自分のサイトの一時的なスナップショットを作成しました：http：//hunpony.hu/today/

問題は、右側のパネルの最初のdivdiv#randomTile.tileが、ある種見当違いであるということです。

ここに画像の説明を入力してください

どうしてか分かりません。関連するHTML、CSS、JavaScriptは次のとおりです。

<div id="slideoutWrapper">
    <div id="slideout">
        <div id="slideoutTitle">
            <h1 class="dyn"></h1>
        </div>
        <div id="slideoutInner">
            <div id="randomTile" class="tile" style="">
                <img class="small" src="img/small/vs.svg">
                <h4>Random<br>&nbsp;</h4>
            </div>
        </div>
    </div>
</div>

...CSSの意味するベンダープレフィックス属性では、コードブロックが長くなりすぎるため、それらを削除しました。

#slideoutInner .tile {
    cursor: pointer;
    margin:.5em;
    text-align:center;
    display:inline-block;
    width:95px;
    text-overflow: ellipsis;
    ...
    transition-duration: 0.3s;
    box-shadow:0;
    height:127px;
    white-space:nowrap;
    ...
    filter: contrast(100%);
}
#slideoutInner .tile:hover { box-shadow:0px 0px 15px; ...; filter: contrast(150%) }
#slideoutInner .tile .small {
    height:75px;
    width:75px;
    margin:5px auto;
    display:block;
}
#randomTile { color:#777; background-color: #777 }
#slideoutInner .tile h4 {
    line-height: 20px;
    padding:0;
    margin:0px auto 2px;
    display:block;
    text-shadow:none;
    color:white;
}

一部の参照変数は長すぎてここに含めることができません。メインのjsファイルはここにあり、すべてのコードがここにあります。 

$('#randomTile').on('click',function(){
    changeBGImage(rndCharNumber);
}).hover(function(){
    rndCharNumber = randomize(0,backImage.length-1);
    $(this).css({color:colorz[rndCharNumber],backgroundColor:colorz[rndCharNumber]});
    $(this).find('img.small').attr('src','img/small/'+backImage[rndCharNumber]+'.svg');
    $(this).find('h4').html((longNames[rndCharNumber].indexOf(' ') != -1) ? longNames[rndCharNumber].split(' ').join('<br>') : longNames[rndCharNumber]+'<br>&nbsp;');
},function(){
    $(this).css({color:'',backgroundColor:''});
    $(this).find('h4').html(locStr.randomTile[locale]);
    $(this).find('img.small').attr('src','img/small/vs.svg');
});

$(document).ready(function(){
    ...
    for (i=0;i<backImage.length;i++){
        imgArray.push('<img class="small" src="img/small/'+backImage[i]+'.svg">');
    }

    for (i=0;i<longNames.length;i++){
        h4Array.push('<h4>'+((longNames[i].split(' ').join('<br>').indexOf('<br>') != -1) ? longNames[i].split(' ').join('<br>') : longNames[i]+'<br>&nbsp;')+'</h4>');
    }

    for (i=0;i < imgArray.length;i++){
        htmlArray.push('<div class="tile" style="color:'+colorz[i]+';background-color:'+colorz[i]+';">'+imgArray[i]+h4Array[i]+'</div>');
    }

    $('#slideoutInner').append(htmlArray.join(''));
    ...
});
4

1 に答える 1

3

この問題は空白が原因で発生し、インライン要素（.tileブロック）に影響します。これを修正するには、 （親コンテナ）に追加font-size: 0します。#slideoutInner

#slideoutInner {
    overflow-x: hidden;
    text-align: center;
    font-size: 0;
}

ルールの変更margin、例えば。それはあなたの問題を解決します。#slideoutInner .tile4px

于 2013-03-09T21:07:16.343 に答える