< br /> HTML标记不能跨浏览器兼容 [英] <br /> HTML tag not cross-browser compatible

问题描述

我对HTML < br /> 标记存在问题。

我有2张图片在两者之间没有< br /> 时，顶部的底部边界图像触及底部图像的顶部边界，这似乎是它应该是。
然后，如果我将1 < br /> ，那么在2张图片之间应该有一些空格。如果我把2 < br /> ，应该有更多的空间。

Firefox 3.5似乎忽略了第一个< br /> 。如果我放2，那么它会在两幅图像之间留出一些空间。
即使我没有放置任何< br />
，IE7会在两张图片之间留出一些空间。Chrome或Safari中的工作正常，也就是说没有空间没有< br /> ，有一些空间是1 < br /> ，更多的空间与2，等等...
我还没有在IE8中测试过。

有没有办法避免浏览器不使用' t似乎以同样的方式解释< br /> 标记？

感谢您的洞察！ / p>

解决方案

首先，您应该确保在页面上有一个有效的文档类型，以便在符合标准的模式下呈现。这将最大限度地减少差异。 W3C：推荐的DTD列表

< br /> 标记不是HTML，而是XHTML。如果您使用的是HTML，则应该使用< br> 标记。

如果您没有图像之间的任何中断，它们将显示在同一行上。如果没有空间，浏览器将打破这条线并在下一行放置一个图像。如果你在已经被分成两行的图像之间添加一个中断，那没有什么区别。

然而，在某些模式下，某些浏览器会在图像之间产生差异，通过他们自己和作为文本一部分的图像。在图像之间添加中断意味着它们是文本的一部分，浏览器将显示放置在文本行基线上的图像。这意味着在图像下方有一些空间，即从文本行的基线到文本行底部的距离，这是用于挂起像g和j这样的字符的空间。根据图像大小和线条高度的不同，图像上方可能还会有一些空间。

为了确保图像不显示为文本的一部分你应该把它们变成块元素。你可以使用 display：block; 这个样式。你也可以使用 float：left; 或 float：right; 来使图像浮动，这会自动生成一个块元素。

I have an issue with the HTML <br /> tag.

I have 2 images above each other.

With no <br /> between the two, the bottom border of the top image touches the top border of the bottom image which seems to be what it is supposed to be. Then if I put 1 <br />, there should be some space between the 2 images. If I put 2 <br />, there should be even more space.

Here is the problem

Firefox version 3.5 seems to ignore the first <br />. If I put 2 then it puts some space between the 2 images. IE7 puts some space between the 2 images even if I don't put any <br /> Things work fine in Chrome or Safari, i.e. there is no space with no <br />, some space with 1 <br />, more space with 2, etc... I have not tested in IE8.

Is there a way to get around the fact that browsers don't seem to interpret the <br /> tag the same way?

Thanks for your insight!

解决方案

First of all you should make sure that you have a valid doctype on the page, so that it renders in standards compliant mode. That will minimise the differences. W3C: Recommended list of DTDs

The <br /> tag is not HTML, it's XHTML. If you are using HTML you should use a <br> tag instead.

If you don't have any break between the images, they would be displayed on the same line. If there isn't room for that, the browser will break the line and place one image on the next line. If you add a break between images that has already been broken into two lines, that makes no difference.

However, in some modes some browsers make a difference between images that are by themselves and images that are part of a text. Adding a break between the images means that they are part of a text, and the browser will display the image placed on the base line of a text line. This means that there is some space below the image that is the distance from the base line of the text line to the bottom of the text line, the space used for hanging characters like g and j. Depending in the size of the images and the line height, there may also be some space above the image.

To ensure that the images are not displayed as part of a text you should turn them into block elements. You can use the style display:block; for this. You can also use float:left; or float:right; to make an image float, that will automatically make it a block element.

这篇关于&lt; br /&gt; HTML标记不能跨浏览器兼容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！