<br /> HTML-тег не совместим с браузерами - PullRequest
Новая
       16

<br /> HTML-тег не совместим с браузерами

3 голосов
/ 20 сентября 2009

У меня проблема с тегом HTML <br />.

У меня есть 2 изображения друг над другом.

Если между ними нет <br />, нижняя граница верхнего изображения соприкасается с верхней границей нижнего изображения, что, по-видимому, и должно быть. Тогда, если я поставлю 1 <br />, между двумя изображениями должно быть свободное пространство. Если я поставлю 2 <br />, там должно быть еще больше места.

Вот проблема

Firefox версии 3.5, похоже, игнорирует первую <br />. Если я поставлю 2, то между двумя изображениями будет место. IE7 помещает некоторое пространство между двумя изображениями, даже если я не ставлю <br /> В Chrome или Safari все работает нормально, то есть нет места без <br />, немного места с 1 <br />, больше места с 2 и т. Д. Я не тестировал в IE8.

Есть ли способ обойти тот факт, что браузеры, похоже, не интерпретируют тег <br /> одинаково?

Спасибо за понимание!

Ответы [ 7 ]

10 голосов
/ 20 сентября 2009

Прежде всего вы должны убедиться, что у вас есть допустимый тип документа на странице, чтобы он отображался в режиме соответствия стандартам. Это сведет к минимуму различия. W3C: рекомендуемый список DTD

Тег <br /> - это не HTML, это XHTML. Если вы используете HTML, вы должны использовать тег <br>.

Если между изображениями нет перерывов, они будут отображаться в одной строке. Если для этого нет места, браузер прервет строку и поместит одно изображение на следующую строку. Если вы добавите разрыв между изображениями, которые уже разбиты на две строки, это не имеет значения.

Однако в некоторых режимах некоторые браузеры различают изображения, которые сами по себе, и изображения, являющиеся частью текста. Добавление разрыва между изображениями означает, что они являются частью текста, и браузер отобразит изображение, размещенное в базовой строке текстовой строки. Это означает, что под изображением есть некоторое пространство, которое является расстоянием от базовой строки текстовой строки до нижней части текстовой строки, пространства, используемого для подвешивания таких символов, как g и j. В зависимости от размера изображений и высоты строки, над изображением также может быть некоторое пространство.

Чтобы изображения не отображались как часть текста, их следует превратить в блочные элементы. Вы можете использовать стиль display:block; для этого. Вы также можете использовать float:left; или float:right; для создания плавающего изображения, которое автоматически сделает его блочным элементом.

10 голосов
/ 20 сентября 2009

Попробуйте использовать css для позиционирования изображений, а не полагаться на тег br. 

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

Например.

1 голос
/ 20 сентября 2009

Размер элемента 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>

Хотя в этом примере было бы проще установить нижнее поле для самой строки.

0 голосов
/ 13 декабря 2009

Я бы добавил одну вещь к ответу DanTdr. Если вы не добавите маленький размер шрифта для тега BR, то у вас возникнут проблемы в IE из-за его поведения hasLayout. BR будет минимум 1em. 

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

После некоторого разочарования из-за того, что теги BR не отображались одинаково в Firefox и IE, этот стиль font-size: 1px;, наконец, сделал мой макет одинаковым в обоих браузерах.

0 голосов
/ 21 сентября 2009

Вы настроены так? 

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

Правильное поведение - не разрывать строки между изображениями, они должны отображаться на одной строке. Первый добавленный тег BR должен перенести второе изображение на новую строку, затем второй BR должен создать пробел.

Возможно, это будет исправлено, если вы специально скажете своим изображениям разрывать строки, чтобы они отображались на отдельных строках даже без BR.

0 голосов
/ 21 сентября 2009

Элемент br - это элемент представления, который не имеет описательной ценности. Большинство браузеров, как правило, применяют представление по умолчанию к различным элементам, которые могут незначительно отличаться от браузера к браузеру. Поэтому я настоятельно рекомендую не использовать элемент br, а вместо этого использовать тег span и CSS для обеспечения единообразия представления в разных браузерах.

0 голосов
/ 20 сентября 2009

если вы хотите использовать тег
, вы можете сделать это так: 

<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 и сделать что-то отличное ... но то, что я написал здесь, это "быстрые" и самые простые / быстрые способы, о которых я думал.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...