<br /> HTML标签不兼容跨浏览器

Question

我有HTML <br />标记的问题.

我有2张图片在彼此之上.

在<br />两者之间没有,顶部图像的底部边界接触底部图像的顶部边界,这似乎是它应该是的.然后,如果我放1 <br />,两个图像之间应该有一些空间.如果我放2 <br />,应该有更多的空间.

这是问题所在

Firefox 3.5版似乎忽略了第一个<br />.如果我放2,那么它会在2幅图像之间留出一些空间.IE7在两个图像之间放置了一些空间,即使我没有把任何<br /> 东西在Chrome或Safari中正常工作,即没有空间没有<br />,有些空间有1 <br />,有2个空间等等...我还没有测试过在IE8中.

有没有办法解决浏览器似乎没有以<br />同样的方式解释标签的事实？

感谢您的见解!

Answer 1

尝试使用css定位图像而不是依赖于br标记.

img { display: block; margin: 0 0 20px 0; }

例如.

Answer 2

首先,您应该确保页面上有一个有效的doctype,以便它以符合标准的模式呈现.这将最大限度地减少差异.W3C:推荐的DTD列表

该<br />标签不是HTML,它的XHTML.如果您使用的是HTML,则应使用<br>标记.

如果图像之间没有任何中断,它们将显示在同一行上.如果没有空间,浏览器将断开该行并在下一行放置一个图像.如果在已经分成两行的图像之间添加间隔,则没有区别.

但是,在某些模式下,某些浏览器会在自身的图像和作为文本一部分的图像之间产生差异.在图像之间添加间隔意味着它们是文本的一部分,浏览器将显示放置在文本行基线上的图像.这意味着图像下方有一些空间,即从文本行的基线到文本行的底部的距离,用于挂起字符(如g和j)的空间.根据图像的大小和行高,图像上方可能还有一些空间.

为确保图像不会显示为文本的一部分,您应将其转换为块元素.你可以使用这种风格display:block;.您还可以使用float:left;或float:right;使图像浮动,这将自动使其成为块元素.