Плавающие элементы, выпадающие из контейнера в IE7 и иногда в браузерах WebKit также
Я соглашаюсь, что это хорошие идеи:
-
Магические числа вначале. В значительной степени потребовал в *, отклоните:
-
Номер версии файла для назад совместимости.
-
спецификация Порядка байтов.
, Но Ваш четвертый излишество, потому что № 2 позволяет Вам добавить поля, пока Вы изменяете номер версии (и, пока Вам не нужно прямая совместимость ).
- возможно резерв некоторое пространство для дальнейшего, на атрибуты файла, который мог бы быть необходимым в будущем?
кроме того, идея наложить блочную структуру на Ваш файл, выраженный во многих других ответах, меньше походит на универсальное требование для двоичных файлов, чем решение проблемы с определенными видами полезных нагрузок.
В дополнение к 1-3 выше, я добавил бы их:
-
простая контрольная сумма или другой способ обнаружить, что содержание неповреждено. Иначе Вы не можете доверять волшебным байтам или номерам версий. Старайтесь для спецификации, какие байты включены в контрольную сумму. Обычно Вы включали бы все байты в файл, которые уже не имеют обнаружения ошибок.
-
версия Вашего программного обеспечения (включая самое детализированное число Вы имеете, например, номер сборки), который записал файл. Вы собираетесь получить отчет об ошибках с прикрепленным файлом от кого-то, кто не может открыть его, и у них не будет подсказки, когда они записали файл, потому что ошибка не произошла тогда. Но ошибка находится в версии, которая записала его, не в том, пытающемся считать ее.
-
Проясняют в спецификации, что это двоичный файл формат, т.е. все значения 0-255 позволяются для всех байтов (кроме магических чисел).
И вот некоторые дополнительные:
-
при необходимости в прямой совместимости Вам нужен некоторый способ выразить, какие "блоки" являются "дополнительными" (как png, делает), так, чтобы предыдущая версия Вашего программного обеспечения могла перескочить через них корректно.
-
, Если Вы ожидаете, что эти файлы будут найдены "в дикой природе", Вы могли бы полагать, что встраивание некоторой подсказки нашло спецификацию. Вообразите, как полезный это должно было бы найти строку http://www.w3.org/TR/PNG/ в png файле.
6 ответов
Контейнер, в вашем случае "div.container", не сможет вычислить правильную высоту самого себя после того, как его дочерние элементы будут перемещены. Если есть какие-либо дочерние блоки, которые не являются плавающими, контейнер будет использовать высоту самого высокого из них.
Контейнер с обоими дочерними блоками является обычным в любом случае. Есть определенные способы исправить это. Лучше всего рассмотрите подходы, описанные QuirksMode. http://www.quirksmode.org/css/clearing.html
Итак, чтобы решить вашу проблему, просто добавьте это в свой файл CSS.
div.container { overflow: auto; width: 100%; }
ВНИМАНИЕ: значение ширины может быть любым значением, которое вы хотите . но он обязан запускать поведение HasLayout в IE [67]
Другой способ решения проблемы. Вы можете использовать дополнительный div:
<div style="clear: both;"></div>
Добавьте его после div.right в div.container .
Однако, есть лучший способ сделать это. Добавьте служебный класс .clearfix в свой CSS:
.clearfix {
*zoom: 1;
}
.clearfix::before,
.clearfix::after {
display: table;
content: "";
}
.clearfix::after {
clear: both;
}
Добавьте clearfix в атрибут класса div.container .
The div rightmenu has no height because it contains only floated elements which do not have a height themselves.
To clear the float use
<div class="rightmenu" style="overflow:hidden;zoom:1;background-color:#ccc;">
The overflow:hidden will clear the float for firefox, safari and chrome. The zoom:1 invokes hasLayout for ie6/ie7. The background-color:#ccc is just so you can see the div does contain the floats.
Поместите этот код в нижнюю часть div #rightmenu:
<span style="clear:both;"></span>
Очистить оба стиля завершает плавание как с левой, так и с правой стороны. Установка очистки сразу после плавающего элемента предотвращает утечку поплавка, прерывая эффект поплавка в пределах родительского элемента контейнера.
В некоторых редких случаях
<div style="clear:both;"></div>
не будет работать, потому что в этом случае div использует высоту строки по умолчанию и размер шрифта по умолчанию
Поместите этот класс в CSS
.clear { clear: both; font-size: 0px; line-height: 0px; height: 0px; overflow:hidden; }
и используйте его в коде
<div class="leftmenu">
... some stuff here ...
</div>
<div class="rightmenu">
... some stuff here ...
</div>
<div class="clear"></div>
Не зная, что делают классы "leftmenu" и "rightmenu", трудно решить вашу точную проблему, но попробуйте добавить overflow: hidden; к любому элементу. НЕ ПОПУЛЯЛИ, НО ПУТЕШЕСТВУЕТ. то есть: div.rightmenu в примере и любые другие правила в вашем CSS.
This works:
<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">
<body>
<div class="container">
<div class="leftmenu">
... some stuff here ...
</div>
<div class="rightmenu" style="padding-bottom: 5px !ie; border: 1px solid black;">
<div style="float: right; text-align: right;">
<button style="display: inline-block;" class="ui-state-disabled ui-state-default ui-corner-all"> Button 1 </button>
<button class="ui-state-disabled ui-state-default ui-corner-all"> Button 2 </button>
<button class="ui-state-disabled ui-state-default ui-corner-all"> Button 3 </button>
<button class="ui-state-disabled ui-state-default ui-corner-all"> Button 4 </button>
</div>
<br style="clear: both;" />
</div>
</div>
</body>
</html>