IE7 margin-bottom от абзаца добавляется к img { float: left; }

7ion · December 9, 2017

Обеспечиваю тут поддержку IE7 и не могу найти правильных слов для гугла.

Примеры типа "добавьте плавающему элементу display: inline либо zoom: 1" не работают.

Есть такой код:

<div>
   <img src="http://placekitten.com/200/200?image=6" />
   <p>Текст</p>
</div>

И к нему CSS

div { overflow-y: hidden; }
img { float: left; }
p { margin: 1em; }

Если запустить это в любом ИЕ <= 7, у img появится margin-bottom от подследнего вложенного элемента. В IE >= 8 такого бага нет.

Смастерил на коленке фикс:

.fix {
  zoom: expression( 
  this.runtimeStyle.zoom="1",
  this.appendChild( document.createElement("div") ).className="fixer"
  );
}

.fixer {
  width: 0;
  height: 0;
}

Фикс оказался совершенно хрустальным: после первой JS-ошибки экспрешены не работают, а ошибки, увы, есть.

Есть способ как-то починить это без экспрешенов?

Демо: http://pskovich.ru/garbage/iebug.html (в иешных средствах разработчика выбрать режим IE7).

7ion · December 10, 2017

Вот за 10 постов мы и пришли к тому, откуда начали

В итоге решил добавлять блок .fixer на стороне сервера.

AlexWeb · December 9, 2017

Тут все просто.

У вас просто тег p вылезает.

Ему тоже нужно задать float:left;

Edited December 9, 2017 by AlexWeb

7ion · December 9, 2017

16 минут назад, AlexWeb сказал:

У вас просто тег p вылезает.

Ему тоже нужно задать float:left;

Мне нужно, чтобы текст обтекал картинку, если его много.

AlexWeb · December 10, 2017

Вставьте img в p

7ion · December 10, 2017

Отступ снизу никуда не девается, и в случае вложенного флоата инспектор показывает даже очень забавные картинки.

Для сравнения - в режиме IE8 все адекватно.

AlexWeb · December 10, 2017

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Document</title>
	<style>
	div { 
		overflow-y: hidden; 
		height: auto;
		border: none;}
	img { 
		float: left;
		margin-right: 10px;}
	p { 
		margin: 1em;
		float: left;}
	</style>
</head>
<body>
	<div>		
		<p><img src="http://placekitten.com/200/200?image=6">
			Текст любого размера
		</p>
		
	</div>
</body>
</html>

Блок выделен. Режим - 7 ie.

7ion · December 10, 2017

То, что мне нужно получить в итоге - картинку, прибитую к левому верхнему углу без полей вообще, и текст, который отстоит от краев контейнера на 1em и обтекает картинку. Вот так и вот так (все хорошо в ИЕ8):

Вот что я получаю в ИЕ7:

В вашем примере, как видно, нижнее поле съедается, но даже если починить его с помощью clear:left, то останется точно такое же поле при небольшом тексте, которого нет в ИЕ8:

Поэтому ваш пример не помогает, никак, либо я чего-то не понимаю.

AlexWeb · December 10, 2017

У меня начинает подгорать))

Разукрашка:

красный - это div

зеленый - это p

делаем то, что я вам скинул в 2х вариантах (много текста, мало текста)

http://pixs.ru/showimage/dagf1taskj_1490523_28604972.jpg

http://pixs.ru/showimage/2taskjpg_2536133_28604978.jpg

делаем волшебство

http://pixs.ru/showimage/task3jpg_5104466_28604986.jpg

http://pixs.ru/showimage/task4jpg_2167806_28604990.jpg

Какой вариант нам нужен?

Если нам нужен 2й вариант, то вот код

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Document</title>
	<style>
	div { 
		overflow-y: hidden; 
		height: auto;
		border: none;
		background-color: red;
	}

	img { 
		float: left;
		margin-right: 10px;		
	}
	p { 
		/*margin: 1em;*/
		float: left;
		background-color: green;
	}
	</style>
</head>
<body>
	<div>				
		<p>
			<img src="http://placekitten.com/200/200?image=6">
			Текст
		</p>
		<div style="clear: both; content: ''; height: 0;"></div>	
	</div>
</body>
</html>

Как можно понять, ваш margin тупо закоменчен, потому что он работает во все стороны. Распорка в подарок)

AlexWeb · December 10, 2017

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

7ion · December 10, 2017

Я благодарен вам за помощь, но вы не понимаете поставленной задачи.

Если отредактировать две ваших последних картинки, то должно быть так (красной линией отмечены границы поля):

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

Любых других подпорочных и распорочных блоков в html-коде быть не должно, иначе бы я просто встраивал класс .fixer из первого сообщения на стороне сервера, а не яваскриптом.

AlexWeb · December 10, 2017

http://pixs.ru/showimage/fg235iyjpg_1471688_28614787.jpg

Так?

7ion · December 10, 2017

Так. Теперь оставьте текста столько, чтобы картинка распирала блок по высоте.

AlexWeb · December 10, 2017

Прям вот так, как вы хотите - наверно, не получится. Если нужно достичь обтекания картинки, то это в любом случае float. А если его использовать то придется ставить распорку, что бы убрать обтекание для других элементов и нормального отступа снизу для p.

А чем мешает рамка снизу?

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

Так что вариантов всего 3:

Отказаться от обтекания.

Обыграть рамку относительно других элементов.

Не поддерживать ie7 ))) (Зачем вообще нужна его поддержка?) :huh:

http://pixs.ru/showimage/fdhsdhjpg_5771743_28615232.jpg

Это с маленьким текстом тоже самое. Никак от этого не избавиться. Причину описал выше. Либо будет зеленый padding от p, либо вот этот красный блок из-за margin p. Отрицательный отступ у картинки заставит текст заезжать под него.

AlexWeb · December 10, 2017

http://pixs.ru/showimage/sdfhjpg_6291544_28615315.jpg

http://pixs.ru/showimage/hsgkgflghj_3085492_28615331.jpg

Без отступов так себе... Но опять же можно обыграть от соседних элементов.

Этот код, если что

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Document</title>
	<style>
	.container {	
		background-color: red;				
	}

	img {		
		float: left;
		margin-top: -1em;
		margin-left: -1em;
		margin-right: 1em;
	}
	p {	
		margin: 1em;
		margin-bottom: 0;
		float: left;								
		background-color: green;
	}
	</style>
</head>
<body>
	<div class="container">
		<p>
			<img src="http://placekitten.com/200/200?image=6">
			текст 
		</p>
		<div style="content: '';clear: both; height: 0;"></div>
	</div>
</body>
</html>

margin-bottom: 0; можно убрать у p и появится рамка снизу, если что

Edited December 10, 2017 by AlexWeb

Sign In

IE7 margin-bottom от абзаца добавляется к img { float: left; }

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information