绝对DIV与mozilla V.S.定位safari V.S. Chrome V.S. IE [英] absolute DIV positioning with mozilla V.S. safari V.S. Chrome V.S. IE
问题描述
我在浏览器兼容div定位时遇到问题。我正在做一个图像地图，其上的按钮位于单独的div中。这些div倾向于在Firefox中移动，在safari和chrome中一切正常。
它们往往会下移一点。
更改doctype似乎会影响Firefox中的呈现。但是没有一个doctype似乎有效。
检查Firefox链接中的阿尔及尔按钮，你会明白我的意思。
http://kareldc.com/grimonprez/index_js_animatie_clicks.html
任何帮助=非常感谢！
< body> 元素仍然使用浏览器的默认边距和填充值（8px），这可能会弥补您看到的差距。 另外需要注意的是，尽管图片具有明确的高度，但围绕它们的< div> 实际上比这些图片更高。
例如，您引用的图片高度为37像素。它包围在＃button_8_algiers div中。
- 在Firefox中，该元素为43px高，比图像高6个像素 - 你有像素空白的确切数量。
- 在chrome中，元素高41px，比图像高4个像素。不过，由于某种原因，Chrome浏览器可以正常显示。
I'm having trouble with the browser compatible div positioning. I'm doing an image map with buttons on top of it in separate div's. These div's tend to move around in firefox, in safari and chrome everything is okay.
They tend to move down a bit.
Changing the doctype seems to influence the rendering in firefox. But none of the doctype's seem to work.
Check the Algiers button on this link in firefox and you'll see what I mean.
http://kareldc.com/grimonprez/index_js_animatie_clicks.html
Any help = very much appreciated!
The <body> element is still using the browser's default margin and padding values (8px), which may account for the gap you're seeing.
Another thing to note is that while your images have explicit heights, the <div>s surrounding them are actually taller than those images.
For instance, the image you reference is 37px tall. It's surrounded by the #button_8_algiers div.
- In Firefox, that element is 43px high, which is 6 pixels taller than the image -- the exact number of pixel whitespace you have.
- In chrome, the element is 41px high, which is 4 pixels taller than the image. Chrome is rendering it OK for some reason, though.
这篇关于绝对DIV与mozilla V.S.定位safari V.S. Chrome V.S. IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
