0

JS 小提琴链接http://jsfiddle.net/Xfvpu/1/

好的，所以我有一个带有 xhtml doctype 的文档，并且我使用了正确的 br / 标签，但是由于某种原因，两个图像之间的差距在 Firefox 中的呈现方式与其他浏览器不同。

该页面可在http://www.safaviehhome.com/Rugs/Area-Rugs.html找到

不幸的是，CSS 都混在一起了，所以我不能明确地发布它，但是这两个图像在一个 DIV 包装器中，并且图像本身不在单独的 div 中。它们都有图像映射，两个图像宽度之间的大小仅相差 20px 左右。

在这两个图像之间是两个 br / 标签，我尝试在 Firebug 中摆弄，但无法弄清楚..在我弄清楚之前我不会高兴..这让我很生气！:)

其他浏览器和 Firefox 之间的差异大约是 10px 差异 .. Firefox 增加了额外的间距 .. 我没有特别寻求任何帮助，只是想看看是否有一些我不知道的渲染问题，所以我可以提出这个问题休息一下。

查看其他浏览器与 Firefox 以了解我的意思.. 我真的很感激一些帮助，我需要以我自己的知识来解决这个问题。

4

2 回答 2

3

您不能依赖使用<br/>垂直间距。您需要使用样式，例如

<div style="margin-top:5px">image goes here</div>

甚至：

<img style="margin-top:5px" src="yourimg.jpg" />

根据我的经验，如果您使用这种方法，浏览器就足够一致了。

编辑添加：

但是（我不能强调这一点）：浏览器永远不会完全一致。假设 100% 一致性是可能的设计将会失败。（如果这看起来很苛刻，请尝试仅使用智能手机的浏览器度过一天。呸。）

于 2012-06-21T16:49:56.543 回答
0

虽然我不知道 Firefox 这样做的确切原因，但我可以提供一个建议。根据我使用 br 标签进行布局的经验，呃，这不是最明智的想法，因为您很容易失去对它创建的确切间距的控制。就像在这种情况下，Firefox 似乎将两个 br 标签解释为两行，而至少 Opera 将第一个标签作为映射后的换行符，而第二个标签创建了这个空白空间。

您没有要求解决方法，但我无法抗拒：看看 br-less Alternative。

于 2012-06-21T16:57:10.453 回答