Почему в IE6 не происходит обтекание

W1nD · April 26, 2011

Подскажите пожалуйста, почему в IE6 блок .two не обтекает блок .one, во всех остальных браузерах это происходит.

Ссылка на пример


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title></title>
	<style type="text/css">
		html,body{width:100%;height:100%;padding:0px;margin:0px;}
		#wrapper{background:#dedede;width:100%;height:100%;}
			.one{margin-left:20px;width:200px;background:red;float:left;}
			.two{width:300px;background:green;zoom:1;}
			.three{width:300px;background:yellow;zoom:1;}
	</style>
</head>
<body>
		<div id="wrapper">
			<div class="one">1</div>
			<div class="two">2</div>
			<div class="three">3</div>
		</div>
</body>
</html>

Синдром · April 27, 2011


html,body{width:100%;height:100%;padding:0px;margin:0px;}
#wrapper{background:#dedede;width:100%;height:100%;}
.one{display:block;margin-left:20px;width:200px;background:red;float:left;display:inline;}
.two{display:block;width:300px;background:green;display:inline;}
.three{display:block;width:300px;background:yellow;zoom:1;}

.one, .two добавил display:inline вместо zoom:1;

не совсем айс, но работает

psywalker · April 27, 2011

zoom:1; создаёт свой собственный блок. Зачем он там тебе?

W1nD · April 27, 2011


html,body{width:100%;height:100%;padding:0px;margin:0px;}
#wrapper{background:#dedede;width:100%;height:100%;}
.one{display:block;margin-left:20px;width:200px;background:red;float:left;display:inline;}
.two{display:block;width:300px;background:green;display:inline;}
.three{display:block;width:300px;background:yellow;zoom:1;}

.one, .two добавил display:inline вместо zoom:1;

не совсем айс, но работает

Для первого блока это свойство лишнее, так как при float блоку автоматически присваивается свойство block. Попробовал ваш код, всеравно ничего не произошло. Только второй блок стал строчным элементом, вот что поменялось.

zoom:1; создаёт свой собственный блок. Зачем он там тебе?

Пожалуйста, вы могли бы дать ссылку на эту информацию, спасибо.

Да, и без zoom все равно обтекания не происходит.

Great Rash · April 27, 2011

Обтекания не происходит не только в ИЕ6. Его нигде не происходит. Вот так все будет обтекать:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title></title>
        <style type="text/css">
                html,body{width:100%;height:100%;padding:0px;margin:0px;}
                #wrapper{background:#dedede;width:100%;height:100%;}
                        .one{margin-left:20px;width:200px;background:red;float:left;}
                        .two{display:inline-block;width:300px;background:green;//display: inline;//zoom:1;}
                        .three{display:inline-block;width:300px;background:yellow;//display: inline;//zoom:1;}
        </style>
</head>
<body>
                <div id="wrapper">
                        <div class="one">1</div>
                        <div class="two">2</div>
                        <div class="three">3</div>
                </div>
</body>
</html>

W1nD · April 27, 2011

Обтекания не происходит не только в ИЕ6. Его нигде не происходит. Вот так все будет обтекать:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title></title>
        <style type="text/css">
                html,body{width:100%;height:100%;padding:0px;margin:0px;}
                #wrapper{background:#dedede;width:100%;height:100%;}
                        .one{margin-left:20px;width:200px;background:red;float:left;}
                        .two{display:inline-block;width:300px;background:green;//display: inline;//zoom:1;}
                        .three{display:inline-block;width:300px;background:yellow;//display: inline;//zoom:1;}
        </style>
</head>
<body>
                <div id="wrapper">
                        <div class="one">1</div>
                        <div class="two">2</div>
                        <div class="three">3</div>
                </div>
</body>
</html>

Ссылка на изображения

Помоему, браузеры меня поддержат, обтекания происходит, вам так не кажется?

Прежде чем писать по теме вопроса, разберитесь для себя, что значит обтекания и как оно выглядит? Расположить в ряд блоки я смогу. У меня не получается сделать так, чтобы блок .two обтекал блок .one

Edited April 27, 2011 by W1nD

Great Rash · April 27, 2011

Нет не кажется, ваши скрины это подтверждают. Обтекание блоком на скринах есть только в ИЕ.

Прежде чем писать по теме вопроса, разберитесь для себя, что значит обтекания и как оно выглядит? Расположить в ряд блоки я смогу. У меня не получается сделать так, чтобы блок .two обтекал блок .one

Прежде чем писать советую вам самому разобраться что такое обтекание и как оно работает.

W1nD · April 27, 2011

Нет не кажется, ваши скрины это подтверждают. Обтекание блоком на скринах есть только в ИЕ.
Прежде чем писать по теме вопроса, разберитесь для себя, что значит обтекания и как оно выглядит? Расположить в ряд блоки я смогу. У меня не получается сделать так, чтобы блок .two обтекал блок .one
Прежде чем писать советую вам самому разобраться что такое обтекание и как оно работает.

Пример номер 1

Пример номер 2

Пример номер 3

Самый яркий пример номер 4

Мой пример

Вот ссылка мой мой пример, только с указанной высотой блока .two

Скажите, что по вашему означает обтекание?

Great Rash · April 27, 2011

Вы реально не понимаете разницу между обтеканием текстом и обтеканием блоком! Это разные вещи. Потрудитесь объяснить по-человечески что вам надо получить. Возможно лучше всего будет если вы покажете скрин того, что вам надо получить, т.к. у вас явные проблемы с терминологией.

W1nD · April 27, 2011

Вы реально не понимаете разницу между обтеканием текстом и обтеканием блоком! Это разные вещи. Потрудитесь объяснить по-человечески что вам надо получить. Возможно лучше всего будет если вы покажете скрин того, что вам надо получить, т.к. у вас явные проблемы с терминологией.

Тогда объясните мне как вы понимаете это, я уже 3 раз пытаюсь от вас этого добиться. Объясните мне и всем, что такое обтекание текстом и блок. Я как посмотрю у вас проблем нету с терминологией. Ну так пролейте же свет знаний на тьму невежества. А я всю свою сознательную жизнь заблуждался, вместо того чтобы мне рассказывать где я не прав, скажите где вы правы.

Great Rash · April 27, 2011

Не вопрос. Писать ничего не буду, так как все уже за меня написано. Всем, кто хочет понять что такое float и как должны вести себя элементы написано тут. Читайте на здоровье и к вам обязательно придет понимание того что именно вы делаете неправильно.

Вместо того чтобы меня тут на "слабо" ловить лучше б показали скрин того что вам надо...

W1nD · April 27, 2011

Не вопрос. Писать ничего не буду, так как все уже за меня написано. Всем, кто хочет понять что такое float и как должны вести себя элементы написано тут. Читайте на здоровье и к вам обязательно придет понимание того что именно вы делаете неправильно.
Вместо того чтобы меня тут на "слабо" ловить лучше б показали скрин того что вам надо...

Ладно, уход засчитан. Дальше бы получилось без содержательно.

Вот то что мне надо

Есть форма входа, мне нужно сделать вокруг нее полупрозрачную рамку.

Я использовал несколько методов:

1) Делал блок обертку, которому назначал opacity везде понятное дело все работало нормально, только не в IE, там даже содиржимое блока становилось прозрачное. Отказался от этого метода

2)


<div id="wrap">
  <div class="transparency"></div>
  <div class="b-content"></div>
</div>

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

3) Вспомнил про обтекание применение свойства float и про обтекание одним блоком другого. Опять, везде работает, в IE нет.

В спецификации вот что написано

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist.

4) Придется, скорее всего, делать через прозрачный png, правда все эти ухищрения были нацелены на то чтобы обойтись без JavaScript

Если у вас есть примеры решения, буду рад выслушать.

Пока писал ответ наткнулся на статью Ссылка на хабр

Edited April 27, 2011 by W1nD

Great Rash · April 27, 2011

Что-то не понятно как завязана прозрачная рамка и флоат между собой...

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

Вот возьмем ваш пример номер 1:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>

	<style type="text/css">
		.wrap {
			width: 50%;
			margin: 0 auto;
			border: 1px solid;
		}

		.float {
			float: left;
			width: 150px;
			height: 150px;
			margin: 10px;
			background: red;
		}
	</style>
</head>
<body>

	<div class="wrap">
		<div class="float"></div>

		<p>
			я текст, я обтекаю плавающий блок я текст, я обтекаю плавающий блок 
			я текст, я обтекаю плавающий блок я текст, я обтекаю плавающий блок 
			я текст, я обтекаю плавающий блок я текст, я обтекаю плавающий блок 
			я текст, я обтекаю плавающий блок я текст, я обтекаю плавающий блок 
			я текст, я обтекаю плавающий блок я текст, я обтекаю плавающий блок 
			я текст, я обтекаю плавающий блок я текст, я обтекаю плавающий блок 
			я текст, я обтекаю плавающий блок я текст, я обтекаю плавающий блок 
			я текст, я обтекаю плавающий блок я текст, я обтекаю плавающий блок 
		</p>
	</div>

</body>
</html>

Вот тут <p> ничего не обтекает. Обтекает только текст. Если вам надо чтобы обтекал именно блок, т.е. <p>, то надо его сделать инлайн-элементом (или, на худой конец, задать новый контекст форматирования), тогда флоат будет обтекать именно блок, а не текст как обычно.

Searcher · April 27, 2011

W1nD, несколько раз перечитал все посты и так достоверно и не понял, что вы хотите. И картинка, что вы указали в 12 посте, тоже никак не проливает свет. Там же два разных варианта и оба не похожи на законченную верстку. Какой из них должен получиться?

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

Может вы хотите, чтобы серый блок был не сзади формы, а под ней? Т.е. переносился на следующую строку? Ну задайте этому блоку clear:left и расположите его следующим в потоке, а не вложенным.

А может вы хотите, чтобы форма была внутри серого полупрозрачного блока и этот блок равномерно со всех сторон выступал из под формы?

W1nD · April 27, 2011

А может вы хотите, чтобы форма была внутри серого полупрозрачного блока и этот блок равномерно со всех сторон выступал из под формы?

Вообще-то это я и хочу, это как результат. Я уже почти сверстал. Но для начала, я хотел чтобы как в #12 посте, картинка, та что слева, выглядела одинаково во всех браузерах.

Синдром · April 28, 2011

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

вот отсюда идея

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

.alpha60 {

/* Fallback for web browsers that doesn't support RGBa */

background-color: rgb(0, 0, 0);

/* RGBa with 0.6 opacity */

background-color: rgba(0, 0, 0, 0.6);

/* For IE 5.5 - 7*/

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);

/* For IE 8*/

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

}

для особенно некрофильных личностей даже поддержка ie 5.5 а вообще сдался сейчас кому шестой ие, сколько на нем народу еще сидит? Пускай отдыхает старичок, делайте минимальную поддержку абы работало и нормально.

W1nD · April 28, 2011

Попробуйте вложить элементы, на внешний назначить RGBa бекргаунд с фильтрами для ие, а на внутренний маргин с нужным отступом, не пробовал но должно сработать.
вот отсюда идея
http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
для особенно некрофильных личностей даже поддержка ie 5.5 а вообще сдался сейчас кому шестой ие, сколько на нем народу еще сидит? Пускай отдыхает старичок, делайте минимальную поддержку абы работало и нормально.

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

Sign In

Почему в IE6 не происходит обтекание

Question

Link to comment

Share on other sites

16 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

Join the conversation

Обсуждения

Important Information