使用 mozilla V.S. 进行绝对 DIV 定位野生动物园VS铬 V.S. IE答案

【问题标题】：absolute DIV positioning with mozilla V.S. safari V.S. Chrome V.S. IE使用 mozilla V.S. 进行绝对 DIV 定位野生动物园VS铬 V.S. IE
【发布时间】：2011-11-05 01:45:32
【问题描述】：

我在浏览器兼容的 div 定位方面遇到问题。我正在做一个图像映射，上面有单独的 div 中的按钮。这些 div 倾向于在 Firefox、Safari 和 chrome 中移动，一切正常。

他们倾向于向下移动一点。

更改文档类型似乎会影响 Firefox 中的渲染。但似乎没有一个 doctype 起作用。

在 Firefox 中查看此链接上的 Algiers 按钮，您就会明白我的意思了。

http://kareldc.com/grimonprez/index_js_animatie_clicks.html

任何帮助 = 非常感谢！

【问题讨论】：

标签： google-chrome html safari positioning mozilla

【解决方案1】：

<body> 元素仍在使用浏览器的默认边距和内边距值 (8px)，这可能是您看到的差距的原因。

另外需要注意的是，虽然您的图片有明确的高度，但它们周围的 <div>s 实际上比这些图片要高。

例如，您引用的图片是 37 像素高。它被#button_8_algiers div 包围。

在 Firefox 中，该元素的高度为 43 像素，比图像高 6 像素，即您拥有的确切像素空白数。
在 chrome 中，元素高 41 像素，比图像高 4 像素。不过，由于某种原因，Chrome 呈现正常。

【讨论】：

是的，总是尝试通过 CSS 重置来中和填充和边距：google.com/search?q=reset+css
我正在考虑在 jquery 中进行浏览器检查，并可能在所有 css 元素的所有最高值中添加一个“-10px”......但我猜这是最后的手段。 ..
谢谢！我把这一切都修好了，我也遇到了嵌套以及绝对和相对定位的问题。但现在我把这一切都解决了！