Question

现在我正在帮助一位朋友充实了一个关于在400x400盒子里展示各种服装图像的想法。

我在使用绝对定位的div（衣服盒子裤子，衣服盒子衬衫等）时遇到问题，这些div包含位置设置的父div（装备盒）内的服装图像相对的。在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/）。

Answer 2

我在firefox 5中看了它。那里也是一团糟......

我认为你需要用firebug来看待它。例如，它说你有一个“styles.css”文件重新定义了.outfix-box-pants在左边：1px，top 1px。（第297行）

所以，实际上一切都正如你所定义的那样显示。

您可能要删除对http://preview.archerandreed.com/styles.css的引用或修复它。

现在，至于为什么你的firefox正确显示，我会说它是缓存的，你不是在查看当前的副本。

Chrome / IE问题与多个div与图像的绝对定位

2 个答案: