javascript - 非动态添加元素上奇怪的 CSS 错位

Question

我暂时为我的站点创建了一个临时快照:http://hunpony.hu/today/

问题是，在右侧面板中，第一个 div div#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 中表示 vendor 前缀属性，我删除了它们，因为它使代码块太长。

#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文件是here ，所有代码所在的位置。

$('#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(''));
    ...
});

Answer 1

问题是由空格引起的，它们会影响内联元素(.tile block )。要修复它，请将 font-size: 0 添加到 #slideoutInner(父容器):

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

并更改 #slideoutInner .tile 规则的 margin，例如4 像素。它会解决您的问题。