css - 带有图像的多个 div 的绝对定位的 Chrome/IE 问题

Question

现在我正在帮助一位 friend 充实关于在 400x400 盒子内展示各种服装图片的想法。

我在使用绝对定位的 div(outfit-box-pants、out-fit-box-shirts 等)时遇到问题，这些 div 在父 div(outfit-box)中包含服装图像，并设置了位置相对的。在 Firefox 上，我所有的 div 都正确排列，并且网站显示正常。但是在 IE 和 Chrome 上，我的绝对位置 div 把整个页面弄得一团糟。

问题似乎是 IE/Chrome 正在为我的其余 div 分配某种定位，这导致它们全部皱缩。怎么回事？

编辑:问题已解决!

Answer 1

您的图片标签缺少结束标签 (/>)。

                <div class="outfit-box-shoes">
                    <img src="http://preview.archerandreed.com/images/outfits/large/shoes-001.png" />
                </div>                    
                <div class="outfit-box-shirt">
                    <img src="http://preview.archerandreed.com/images/outfits/large/shirt-001.png" />
                </div>                    
                <div class="outfit-box-pants">
                    <img src="http://preview.archerandreed.com/images/outfits/large/pants-001.png" />
                </div>                    

一旦我添加了这些，图像就会为我排好队 ( http://jsfiddle.net/sSRVe/9/ )。