HasLayout

DjTarik · May 20, 2010

Да, все ищут, что это такое и как его использовать, как включить...

А мне нужно отключить. =)

Т.е. по умолчанию в ie6 zoom: 1; имеется у img. Как его отключить? =)))

Никогда не сталкивался с такой задачей...

psywalker · May 20, 2010

Да, все ищут, что это такое и как его использовать, как включить...
А мне нужно отключить. =)
Т.е. по умолчанию в ie6 zoom: 1; имеется у img. Как его отключить? =)))
Никогда не сталкивался с такой задачей...

Я думаю тебе просто нужно найти другое решение, и наверняка оно есть.

rash · May 20, 2010

Иногда (закономерности никакой пока не замечено) HasLayout отключается с помощью zoom:0;

Если не поможет — надо искать принципиально другое решение. Хотя если такая штука понадобилась — уже стоит задуматься, что здесь что-то не так...

Great Rash · May 20, 2010

А если через JavaScript поставить object.hasLayout = 0;?

DjTarik · May 20, 2010

Я думаю тебе просто нужно найти другое решение, и наверняка оно есть.

Есть, написать для IE отдельный стиль или подстраивать стили для всех браузеров, как для IE)

Иногда (закономерности никакой пока не замечено) HasLayout отключается с помощью zoom:0;
Если не поможет — надо искать принципиально другое решение. Хотя если такая штука понадобилась — уже стоит задуматься, что здесь что-то не так...

Ну, я уже много чего перечитал - вроде не поможет, хотя я ещё пойду пробовать.

А если через JavaScript поставить object.hasLayout = 0;?

А вот это ХЗ. Читал, что есть такое hasLayout=''? но мне нужно через CSS... Есть ли такой экспрешн?

P.S. А вообще - просто если я <img> ставлю margin: ; - то он не будет схлопываться с тем же margin: ; в .

Вот в такой структуре, допустим:

<div class="editor">
		  <img src="#" width="300" height="225" alt="" title="" />
		  <p>text</p>
		  <p>text</p>
		  <p>text</p>
		  <p style="clear: both;"><a href="#" title="#">Вернуться назад</a></p>
		</div>

Если картинка длиннее параграфов - очистка в ie не схлопнет маржины снизу. Как-то так. )

Я решил, что проблема из-за haslayout)))

DjTarik · May 20, 2010

Я тут все перечитал... Короче - можно вырубить хэслоят... Но для img у меня это так и не получилось. Скриптом проверяю свойство - всегда тру... Даже не знаю, что ещё сделать... =(

Хотя проблема может и не в нем.

Решил замутить тестовую страницу:

http://tarik.kasperovich.ru/test_4/index.html

Есть 2 вопроса:

1. Во всех браузерах - почему не схлопывается маржин у картинки сверху? (снизу всё нормально)

2. в IE снизу маржин не схлопывается...

Кто может рассказать, почему?

psywalker · May 21, 2010

1. Во всех браузерах - почему не схлопывается маржин у картинки сверху? (снизу всё нормально)
2. в IE снизу маржин не схлопывается...

1) Во всех браузерах правильно отображается, а именно есть отступы сверху и снизу. А с чего ты взял, что их не должно быть, если ты всем марджин понаставил?

2) Тоже самое.

DjTarik · May 21, 2010

1) Во всех браузерах правильно отображается, а именно есть отступы сверху и снизу. А с чего ты взял, что их не должно быть, если ты всем марджин понаставил?
2) Тоже самое.

Вопрос 1: Почему к абзацев маржины схлопываются, а у картинки - нет?

psywalker · May 21, 2010

Схлопываются поля именно у дива с датой и параграфа, как и должно быть. А у картинки этого не происходит, потому-что она выровнена по левому краю флоатом. А Флоат блоки уже по другому себя ведут в таких ситуациях, т.е. поля у них не схлопываются.

Searcher · May 21, 2010

А с чего ему у картинки в вашем примере схлопыватся? Схлопываются отступы элементов в одном потоке, а плавающий элемент выпадете из этого потока.

Многие свойства элементов взаимозависимы. Мало того, принцип работы некоторых свойств одного элемента зависит от свойств другого.

Кстати по структуре у вас уже есть логическая ошибка. Если картинка относится к тексту, так она и должна быть в тексте, а не вне его.

А вообще DjTarik молодцом! Практикуйтесь дальше. Правильным путем идете! )))

psywalker · May 21, 2010

А вообще DjTarik молодцом! Практикуйтесь дальше. Правильным путем идете! )))

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

К этому топу это не относится. :blink:

DjTarik

Проведи эксперимент. Поставь рядом две зафлоаченные картинки и сделай им отступы. Увидишь, что они не схлопываются, а наоборот плюсуются.

DjTarik · May 21, 2010

Схлопываются поля именно у дива с датой и параграфа, как и должно быть. А у картинки этого не происходит, потому-что она выровнена по левому краю флоатом. А Флоат блоки уже по другому себя ведут в таких ситуациях, т.е. поля у них не схлопываются.

А с чего ему у картинки в вашем примере схлопыватся? Схлопываются отступы элементов в одном потоке, а плавающий элемент выпадете из этого потока.
Многие свойства элементов взаимозависимы. Мало того, принцип работы некоторых свойств одного элемента зависит от свойств другого.
Кстати по структуре у вас уже есть логическая ошибка. Если картинка относится к тексту, так она и должна быть в тексте, а не вне его.
А вообще DjTarik молодцом! Практикуйтесь дальше. Правильным путем идете! )))

Да, меня тоже радует его упорство. Но иногда он перебарщивает, изобретая ненужные велосипеды и ставя перед собой задачи, которые не стоят свеч.
К этому топу это не относится.
DjTarik
Проведи эксперимент. Поставь рядом две зафлоаченные картинки и сделай им отступы. Увидишь, что они не схлопываются, а наоборот плюсуются.

Спасибо, теперь понятно.

Вопрос 2: почему все-таки в IE нижний отступ отличается?

psywalker · May 21, 2010

Вопрос 2: почему все-таки в IE нижний отступ отличается?

Хочется ответить просто. Потому-что это ИЕ и этим всё сказано. Очередное неправильное поведение, несоответствующее стандартам CSS 2.1. В ИЕ8 кстати это исправлено.

DjTarik · May 21, 2010

Хочется ответить просто. Потому-что это ИЕ и этим всё сказано. Очередное неправильное поведение, несоответствующее стандартам CSS 2.1. В ИЕ8 кстати это исправлено.

=) я так и подумал)

И тогда последний вопрос, третий:

Как верстать такие блоки кроссбраузерно? + ещё с учётом того, что картинка может быть, а может и не быть. Только с отдельным стилем для IE?

psywalker · May 21, 2010

Напиши в стилях. И вроде будет везде одинаково.

.back {

clear: both;

margin: -15px 15px 15px;

background: #1E90FF;

}

DjTarik · May 24, 2010

Напиши в стилях. И вроде будет везде одинаково.
.back {
clear: both;
margin: -15px 15px 15px;
background: #1E90FF;
}

Да вроде не будет... Я так понимаю, это глюк IE, что у него не схлопывается нижний маржин?

1. Тогда я не знаю, можно ли такие блоки верстать кроссбраузерно.

2. Если есть такие варианты, что картинка может быть, а может и не быть, текст может быть, а может и нет - img должен находится в , или это всё равно? O_o

psywalker · May 24, 2010

Да вроде не будет...

Странно, у меня вроде нормуль везде кросс

mishka · May 24, 2010

У абзацев убери маргин и сделай паддинг, и увидишь что это не у картинки трабла, это у нижнего абзаца дублируется отступ.

Тогда я не знаю, можно ли такие блоки верстать кроссбраузерно.

Можна конечно.

Edited May 24, 2010 by mishka2

DjTarik · May 24, 2010

Странно, у меня вроде нормуль везде кросс

Или я чего-то не догоняю - или можно пример?

У абзацев убери маргин и сделай паддинг, и увидишь что это не у картинки трабла, это у нижнего абзаца дублируется отступ.
Можна конечно.

=) А без паддингов? Меня полностью устраивают маржины и их схлопывание... Но я так и не понял причину поведения в IE. Это баг?

psywalker · May 24, 2010

Или я чего-то не догоняю - или можно пример?

Я на твоём примере и проверял.

DjTarik · May 25, 2010

Я на твоём примере и проверял.

Ну, тогда вроде если текст по высоте больше, чем картинка - криво.

Два вопроса:

1. Если есть такие варианты, что картинка может быть, а может и не быть, текст может быть, а может и нет - img должен находится в , или это всё равно?

2. Я так понимаю, это глюк IE, что у него не схлопывается нижний маржин у зафлоченной картинки?

psywalker · May 25, 2010

Ну, тогда вроде если текст по высоте больше, чем картинка - криво.
Два вопроса:
1. Если есть такие варианты, что картинка может быть, а может и не быть, текст может быть, а может и нет - img должен находится в , или это всё равно?
2. Я так понимаю, это глюк IE, что у него не схлопывается нижний маржин у зафлоченной картинки?

1) Я как правило делаю всё отдельно, спец.блок допустим "Новости", отдельно картинку, отдельно параграф, и всё это в общем диве.

2) Будем ещё разбираться)

DjTarik · May 25, 2010

1) Я как правило делаю всё отдельно, спец.блок допустим "Новости", отдельно картинку, отдельно параграф, и всё это в общем диве.
2) Будем ещё разбираться)

1. Значит в моём случае всё верно? Картинка отдельно от параграфов?

2. ХЗ, что тут ещё можно придумать. Пока на проекте сделал так - вынес блок со ссылкой за див, который оборачивает текст и картинку. Получилось, что теперь картинка и параграфы - это одна чать, а ссылка "Вернуться" - вторая... Так проблем нету, т.к. нижний отступ картинки теперь в диве обертке.

Но сама проблема осталась... )

psywalker · May 25, 2010

1. Значит в моём случае всё верно? Картинка отдельно от параграфов?
2. ХЗ, что тут ещё можно придумать. Пока на проекте сделал так - вынес блок со ссылкой за див, который оборачивает текст и картинку. Получилось, что теперь картинка и параграфы - это одна чать, а ссылка "Вернуться" - вторая... Так проблем нету, т.к. нижний отступ картинки теперь в диве обертке.
Но сама проблема осталась... )

1) Я бы короче верстал так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	.news { 
		overflow: hidden; _zoom:1; 
		margin: 10px 0; 
		border: 1px solid #000;
		border-width: 1px 0;
	}
	.date { 
		display: block; 
		background: red; 
		margin-bottom: 10px;
	}
	.news img { float: left; margin: 0 10px 10px 0;}
	.news p { overflow: hidden;}
	.news .back { display: block; clear: both; background: red;}
</style>
</head>

<body>
		<div class="news">
			<span class="date">20.05.2010.</span>
			<img src="item_img.jpg" alt="Изображение к новости" title="Изображение к новости"  />

			<p>Sed faucibus interdum convallis. Praesent feugiat dui ac metus hendrerit vitae interdum libero feugiat. Nullam eleifend luctus lectus eget viverra. Donec tincidunt purus ut nibh pellentesque ut imperdiet ipsum tempor. Nam at nibh mauris. Sed in lectus nibh, eu rhoncus purus. Praesent imperdiet iaculis lorem ut facilisis. Vivamus eget massa vitae mi imperdiet imperdiet et a ligula. Nullam bibendum cursus odio et venenatis. Nam egestas, velit quis semper suscipit, ipsum odio mollis justo, sit amet interdum sem sapien vitae diam. Aenean in quam eget dui tempus molestie.</p>
			<span class="back"><a href="#" title="« Вернуться" >« Вернуться</a></span>
		</div>
		<div class="news">
			<span class="date">20.05.2010.</span>
			<img src="item_img.jpg" alt="Изображение к новости" title="Изображение к новости"  />

			<p>Sed faucibus interdum convallis. Praesent feugiat dui ac metus hendrerit vitae interdum libero feugiat. Nullam eleifend luctus lectus eget viverra. Donec tincidunt purus ut nibh pellentesque ut imperdiet ipsum tempor. Nam at nibh mauris. Sed in lectus nibh, eu rhoncus purus. Praesent imperdiet iaculis lorem ut facilisis. Vivamus eget massa vitae mi imperdiet imperdiet et a ligula. Nullam bibendum cursus odio et venenatis. Nam egestas, velit quis semper suscipit, ipsum odio mollis justo, sit amet interdum sem sapien vitae diam. Aenean in quam eget dui tempus molestie.</p>
			<span class="back"><a href="#" title="« Вернуться" >« Вернуться</a></span>
		</div>


</body>
</html>

Покажи мне хоть один браузер, где не кросс?

DjTarik · May 25, 2010

Так а если мне нужны интервалы между параграфами? Я ставлю маржины (с паддингами всё понятно) - и та же проблема всплывает... и картинка должна обтекаться...

Короче - просто вынести спан за блок - и всё)

psywalker · May 25, 2010

Так а если мне нужны интервалы между параграфами?

О каких интервалах идёт речь, между параграфом и чем?

Sign In

HasLayout

Question

Link to comment

Share on other sites

30 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

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