jquery - クロームでオーバーラップするDiv

Question

私のdivはchrome（最新バージョン）でオーバーラップしています。Firefoxでは問題なく、驚くほどインターネットエクスプローラーです。私は本当に速くて単純化されたjsfiddleを作ったので、あなたは私が何を意味するかを見ることができます、グーグルクロームで開くとあなたはそれが重なっているのを見ることができます。誰が何が起こっているのか知っていますか？'clear' divを入れてみましたが、何もしなかったようです。私は初心者ですので、ご注意ください。ありがとうございました。

http://jsfiddle.net/QXz8P/7/

<div id="container">
<div id="thumbnails">
                    <div class="web" id="art1">
                        <img src="http://www.warrenphotographic.co.uk/photography/bigs/03534-Silver-tabby-cat-white-background.jpg" id="img1"/>
                        <div class="caption1">
                            <p id="thumbnailTitle">Title</p>
                            <p id="thumbnailSubtitle">SUBTITLE</p>
                        </div>
                    </div>
                    <div class="graphic" id="art2">
                        <img src="http://www.southbham.cats.org.uk/uploads/images/pages/cat-stalking-crop.jpg" id="img2"/>
                        <div class="caption2">
                            <p id="thumbnailTitle">Title</p>
                            <p id="thumbnailSubtitle">SBTITLE</p>
                        </div>
                    </div>
                    <div class="web" id="art3">
                        <img src="http://upload.wikimedia.org/wikipedia/commons/d/d4/Cat_March_2010-1a.jpg" id="img3"/>
                        <div class="caption3">
                            <p id="thumbnailTitle">Title</p>
                            <p id="thumbnailSubtitle">SUBTTLE</p>
                        </div>
                    </div>
    <div class="clear"></div>
                        <div class="illustration" id="art4">
                        <img src="http://media.npr.org/assets/img/2012/09/20/stripey-kitty-d1332c13945e17c5add3810e5ca39c269af872b8-s6-c10.jpg" id="img4"/>
                        <div class="caption4">
                            <p id="thumbnailTitle">Title</p>
                                <p id="thumbnailSubtitle">SUBTITLE</p>
                            </div>
                    </div>
                    <div class="graphic" id="art5">
                        <img src="http://adam1cor.files.wordpress.com/2011/10/cat1.jpg?w=300&h=300" id="img5"/>
                        <div class="caption5">
                                <p id="thumbnailTitle">Title</p>
                                <p id="thumbnailSubtitle">SUBTITLE</p>
                            </div>
                    </div>
</div>
</div>

CSS

#container {
    width:80%;
}

.clear {
    clear: both;
    padding:5ex;
}
div #art1, #art2, #art3, #art4, #art5 {
    width: 20%;
    height: 100px;
    display: inline-block;
    margin: 5px;
    cursor: pointer;
}

div img {
    opacity:  0.5;
    height: 70%;
}

.caption1, .caption2, .caption3, .caption4, .caption5, .caption6, .caption7, .caption8 {
    margin-top: -5px;
    width: 100%;
    display: inline-block;
    height:40px;
}

.caption4 {
    margin-top: -4px;
}

#thumbnailTitle {
    font-family: 'Open Sans';
    color: #a5a4a4;
    font-size: 0.9em;
    letter-spacing: 1px;
    font-weight: 600;
    margin:0px 0 10px 0;
}

#thumbnailSubtitle {
    font-family: 'Open Sans';
    color: #a5a4a4;
    font-size: 0.8em;
    font-weight: normal;
    letter-spacing: 1px;
    margin:-10px 0 50px 0;
    padding-bottom: 20px;
}

div img {
    width: 100%;
    height: 100%;
}

#thumbnails div#art4 {
    width: 40.4%;
}

Answer 1

コードのベースラインを設定する必要がありました。使用された非ベストプラクティスが非常に多かったため、コードをリファクタリングするのが簡単でした。

http://jsfiddle.net/QXz8P/10/

HTML

<div class="container">

    <div class="thumbnails">

        <div class="art">
            <img src="http://www.warrenphotographic.co.uk/photography/bigs/03534-Silver-tabby-cat-white-background.jpg" />
            <div class="caption">
                <div class="title">Title1</div>
                <div class="subtitle">SUBTITLE1</div>
            </div>
        </div>

        <div class="art">
            <img src="http://www.southbham.cats.org.uk/uploads/images/pages/cat-stalking-crop.jpg" />
            <div class="caption">
                <div class="title">Title2</div>
                <div class="subtitle">SUBTITLE2</div>
            </div>
        </div>

        <div class="art">
            <img src="http://upload.wikimedia.org/wikipedia/commons/d/d4/Cat_March_2010-1a.jpg" />
            <div class="caption">
                <div class="title">Title3</div>
                <div class="subtitle">SUBTITLE3</div>
            </div>
        </div>        

    </div>

    <div class="thumbnails">

        <div class="art">
            <img src="http://media.npr.org/assets/img/2012/09/20/stripey-kitty-d1332c13945e17c5add3810e5ca39c269af872b8-s6-c10.jpg" />
            <div class="caption">
                <div class="title">Title4</div>
                <div class="subtitle">SUBTITLE4</div>
            </div>
        </div>          

        <div class="art">
            <img src="http://adam1cor.files.wordpress.com/2011/10/cat1.jpg?w=300&h=300" />
            <div class="caption">
                <div class="title">Title5</div>
                <div class="subtitle">SUBTITLE5</div>
            </div>
        </div>  

    </div>

</div>    

CSS

.container {}

.thumbnails  { overflow:hidden; display:block; }

.art {
    width:100px;
    display: inline-block;
    cursor: pointer;
}

.art img {opacity:0.5; width:100%;  }

.art .caption {
    width: 100%;
    display: inline-block;
}

.art .caption. .title{
    font-family: 'Open Sans';
    color: #a5a4a4;
    font-size: 0.9em;
    letter-spacing: 1px;
    font-weight: 600;
    margin:0;
    padding:0;
}

.art .caption .subtitle {
    font-family: 'Open Sans';
    color: #a5a4a4;
    font-size: 0.8em;
    font-weight: normal;
    letter-spacing: 1px;
    margin:0;
    padding:0;
}

JS

$(".art").mouseover(function() {
    $(this).find('.title').css("background-color", "yellow");
    $(this).find('.subtitle').css("background-color", "yellow");
    $(this).find('img').css("opacity", "1");
}).mouseout(function(){
    $(this).find('.title').css("background-color", "transparent");
    $(this).find('.subtitle').css("background-color", "transparent");      
    $(this).find('img').css("opacity", "0.5");
});

これにより、目的のより乾燥したソリューションに近づくことができます。

Answer 2

を追加するpaddingと役立つようです。

.clear {
    clear: both;
    padding-top:5ex;
}