Jquery 镀铬的div重叠

我的div在chrome（最新版本）中是重叠的，在firefox中是很好的，在internetexplorer中也是如此。我制作了一个非常快速和简化的JSFIDLE，这样你可以看到我的意思，如果用谷歌chrome打开，你可以看到它重叠。有人知道发生了什么吗？我试着放一个“清晰”的div，但似乎什么也没做。我是初学者，所以请记住这一点。多谢各位

---

添加

填充

似乎有帮助

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

---

我必须对您的代码进行基线测试，因为使用了太多非最佳实践，所以我更容易重构代码：

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>    

JS

.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;
}

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

---

这会让你更接近于一个更加干涸的解决方案。它在chrome上修复了这个问题，但在firefox和ie上，填充被应用，并且存在很大的差距。哪些div重叠？（我无法访问JSFIDLE）我添加了一个快速图片。div（.caption1、.caption2、.caption3）与较低的div重叠（#art4和#art5）。或者我猜这更像是“字幕部分”被“艺术部分”覆盖，因为上面的字幕部分没有移动，艺术部分在下面移动。希望这是有意义的。这在chrome中似乎可以正常工作。谢谢你简化了javascript，我写的东西旁边看起来很疯狂。我还在学习，所以我希望看到我乱七八糟的代码不会让你太烦恼。非常感谢。我想知道，在一个元素上有多个类是可能的，也是可以的，对吗？我为js图像过滤器添加了一些类。是否可以将它们重新添加？是的，多个类名就可以了。我把一些东西剥离出来，让它变得不那么复杂，而我却在用头包着它。获取我发布的代码，并将其重新构建为您需要的代码。请随时发布有关此代码的任何问题。谢谢。设法使过滤器正常工作（只是想我会告诉你，如果你有更好的想法）…不得不删除缩略图div，因为它使它们堆叠而不是并排。但是现在它工作得很好，谢谢你！我还有一个问题，我把标题和副标题放在了“p”元素中，你把它们去掉了，没有它们的文本可以一直放在元素中吗？这算不上不好还是什么？是的，你使用的方式很好，我只是在最初设计它们时遇到了一些问题，所以我把它们剥离到了div中。把它们放回去是有道理的。很高兴看到您的JSFIDLE运行良好。祝你好运

.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;
}

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