Question

所有计算机的边距都不同。因此图像不会放在它们应该是

的位置

<div id="mydiv" style="height: 25px;width: 503px; left: 659px; position: absolute; text-align: center; top: 805px; width: 130px;width:328px;background:black" onmouseover="this.style.background='yellow';" onmouseout="this.style.background='white';">

    </div>
<div id="mydiv" style="height: 20px;width: 503px; left: 659px; position: absolute; text-align: center; top: 785px; width: 130px;width:328px;background:black" onmouseover="this.style.background='violet';" onmouseout="this.style.background='white';">

    </div>
<div id="mydiv" style="height: 20px;width: 503px; left: 659px; position: absolute; text-align: center; top: 765px; width: 130px;width:328px;background:black" onmouseover="this.style.background='indigo';" onmouseout="this.style.background='white';">

    </div>
<div id="mydiv" style="height: 20px;width: 503px; left: 659px; position: absolute; text-align: center; top: 745px; width: 130px;width:328px;background:black" onmouseover="this.style.background='red';" onmouseout="this.style.background='white';">

    </div>

<div id="mydiv" style="height: 20px;width: 503px; left: 659px; position: absolute; text-align: center; top: 576px; width: 130px;width:328px;background:black" onmouseover="this.style.background='green';" onmouseout="this.style.background='white';">

    </div>
<div id="mydiv" style="height: 20px;width: 503px; left: 659px; position: absolute; text-align: center; top: 556px; width: 130px;width:328px;background:black" onmouseover="this.style.background='orange';" onmouseout="this.style.background='white';">

    </div>
<div id="mydiv" style="height: 20px;width: 503px; left: 659px; position: absolute; text-align: center; top: 536px; width: 130px;width:328px;background:black" onmouseover="this.style.background='brown';" onmouseout="this.style.background='white';">

    </div>
<div id="mydiv" style="height: 20px;width: 503px; left: 659px; position: absolute; text-align: center; top: 519px; width: 130px;width:328px;background:black" onmouseover="this.style.background='violet';" onmouseout="this.style.background='white';">

    </div>

<div id="mydiv" style="height: 150px;width: 40px; left: 659px; position: absolute; text-align: center; top: 596px; width: 10px;width:25px;background:black" onmouseover="this.style.background='indigo';" onmouseout="this.style.background='white';">

    </div>
<div id="mydiv" style="height: 150px;width: 40px; left: 659px; position: absolute; text-align: center; top: 596px; width: 10px;width:25px;background:black" onmouseover="this.style.background='brown';" onmouseout="this.style.background='white';">

    </div>
<div id="mydiv" style="height: 150px;width: 40px; left: 684px; position: absolute; text-align: center; top: 596px; width: 10px;width:25px;background:black" onmouseover="this.style.background='green';" onmouseout="this.style.background='white';">

    </div>
<div id="mydiv" style="height: 150px;width: 40px; left: 709px; position: absolute; text-align: center; top: 596px; width: 10px;width:25px;background:black" onmouseover="this.style.background='pink';" onmouseout="this.style.background='white';">

    </div>
<div id="mydiv" style="height: 150px;width: 40px; left: 734px; position: absolute; text-align: center; top: 596px; width: 10px;width:25px;background:black" onmouseover="this.style.background='violet';" onmouseout="this.style.background='white';">

    </div>

<div id="mydiv" style="height: 150px;width: 40px; left: 885px; position: absolute; text-align: center; top: 596px; width: 10px;width:25px;background:black" onmouseover="this.style.background='indigo';" onmouseout="this.style.background='white';">

    </div>
<div id="mydiv" style="height: 150px;width: 40px; left: 905px; position: absolute; text-align: center; top: 596px; width: 10px;width:25px;background:black" onmouseover="this.style.background='green';" onmouseout="this.style.background='white';">

    </div>
<div id="mydiv" style="height: 150px;width: 40px; left: 930px; position: absolute; text-align: center; top: 596px; width: 10px;width:25px;background:black" onmouseover="this.style.background='blue';" onmouseout="this.style.background='white';">

    </div>
<div id="mydiv" style="height: 150px;width: 40px; left: 955px; position: absolute; text-align: center; top: 596px; width: 10px;width:32px;background:black" onmouseover="this.style.background='red';" onmouseout="this.style.background='white';">

    </div>

Answer 1

图像？您的示例中只有div元素。
您不能为所有元素提供相同的ID，ID必须是唯一的（HTML 4.01和XHTML）

除此之外，您发布的示例在Firefox 3.6，Chrome和Internet Explorer 8中提供了“方形甜甜圈”形状。

由于您使用的是position：absolute，我不确定计算机边距将如何影响此布局。你的意思是屏幕尺寸/浏览器大小 - 如果我在1024x768窗口中查看此示例，形状几乎是关闭页面，我必须滚动，但它仍然存在。也许您可以更详细地描述问题？

我创建了具有绝对定位的div javascript ... bug

1 个答案: