HTML tag is not cross browser compatible I have a problem with the HTML tag
. I have 2 images on top of each other. Without
All geek questions in one place

<br/"> HTML tag is not cross browser compatible

I have a problem with the HTML tag <br />.

I have 2 images on top of each other.

Without <br />between them, the lower border of the upper image touches the upper border of the lower image, which is apparently what it should be. Then, if I put 1 <br />, there should be some space between the two 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 one <br />. If I put 2, it puts some space between two images. IE7 puts some space between two images, even if I don't put any. <br /> Everything works fine in Chrome or Safari, i.e. There is no space without <br />, some space with 1 <br />, more space with 2, etc. .... I have not tested in IE8.

Is there a way around the fact that browsers do not seem to interpret the tag correctly <br />?

Thank you for understanding!

+3
source share
7 answers

Try using css to position the images, rather than relying on the br tag.

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

For example.

+10
source

, , doctype , . . W3C: DTD

<br /> HTML, XHTML. HTML, <br>.

, . , . , , .

, , . , , , . , , , , , g j. .

, . display:block; . float:left; float:right; , .

+10

br / . , , , ?

<!doctype html>
<style>
    body { background:gray; }
   div#gallery .row img { display:block; margin:0 0 1em; }
    div#gallery .last img { margin-bottom:0; }
    div#gallery .row .thumb { float:left; width:5em; }
    div#gallery .row { clear:both; width:50em; overflow:hidden; }
</style>

<div id="gallery">

<div class="row">
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
</div>

<div class="row last">
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>

</div>
</div>

.

+1


, :

<br style="line-height:?px; height:?px" />

? px = :

<br clear="all" />

...

CSS, :

<style>
img.newline{
display:table-row;
}
</style>
<img src="1.jpg" class="newline"/>
<img src="2.jpg" class="newline"/>

.. .. css - .. , , "" / , .

0

br - , . , . br span CSS, .

0

?

<img src="1.jpg" />
<img src="2.jpg" />

- , . BR , BR .

, , , BR.

0

DanTdr. BR, IE - hasLayout. BR 1em.

<br style="line-height: ?px; height: ?px; font-size: 1px;" />

, BR- Firefox IE, font-size: 1px;, , .

0

Source: https://habr.com/ru/post/1718103/

More articles:


All Articles