Плавает плохо? Что следует использовать на его месте

Question

Я сделал переход от дизайна таблицы к CSS около недели назад и с тех пор читал об этом больше. Вчера я прочитал длинный пост здесь на SO, где постеры стучали поплавками и о том, насколько они обесценились. Было много разговоров о том, что inline-block используется вместо него.

У меня есть HTML5-дизайн, который я только что закончил, и он выглядит фантастически в Firefox и Chrome, но при тестировании с других компьютеров, работающих под управлением Internet Explorer версий 7, 8 и 9, дизайн взрывается . мне кажется , что что-либо в этом дизайне, которое я выплыл правильно, не соблюдается в IE. Кажется, он просто оборачивается под тем, что слева от него.

Я хотел бы знать, в порядке ли я с плавающими или мне следует использовать inline-block вместо этого. Пример того, как иметь два элемента div рядом друг с другом, где один находится слева, а другой справа, было бы неплохо использовать inline-block.

У меня есть еще одна дилемма, с которой, надеюсь, кто-то может мне помочь. Я на старой машине для разработки под управлением XP SP1. Лучший браузер IE, с которым я могу протестировать, - это 6. Я хотел бы как-нибудь взять что-то, что позволит мне протестировать версии 7, 8 и 9 (и 10, если он еще не выпущен). Кто-нибудь может порекомендовать какое-либо решение для этого?

Answer 1

Поплавки никогда не предназначались для макета.

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

Так почему мы используем их для разметки?

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

Почему мы до сих пор используем их для макета?

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

Почему ваш дизайн ломается в IE 7,8 и 9?

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

Встроенные блоки лучше?

Многие макеты, которые можно сделать с помощью поплавков, можно сделать с помощью встроенных блоков. Тем не менее, они не решают все проблемы с макетом и не предназначены для макетов. Я считаю, что один из них, как правило, больше подходит для предполагаемого макета.

Ссылки

Поплавки не сосут, если правильно их использовать

Answer 2

Float должен работать нормально, хотя это зависит от того, как вы его использовали - как насчет ссылки на ваш дизайн?

встроенный блок не работает правильно в версиях Internet Explorer менее 8: http://www.quirksmode.org/css/display.html

Answer 3

Вы можете использовать этот пример в строке

<div id="firstdiv">
    That is the first div
</div>
<div id="seconddiv">
    That is the second div
</div>

style.css

 #firstdiv{
        display:inline;
        background-color: #f00;
    }

    #seconddiv{
        display:inline;
        background-color: #00f;
    }

это будет работать на IE8 и выше, но если вы хотите использовать его в IE6 и 7, сделайте следующий код в style.css

#firstdiv{
    display:block;
    background-color: #f00;
    float: left;
}

#seconddiv{
    display:block;
    background-color: #00f;
    float: right;
}

если вы используете HTML5 и CSS3 и хотите, чтобы он работал с IE6, прочитайте следующую статью 5 Инструменты, позволяющие IE играть хорошо с CSS3 и HTML5 в WordPress

Вы можете прочитать эту статью тоже очень полезно Разница между блоком, inline и inline-block