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

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

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

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

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

Ответ 1

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

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

Итак, почему мы используем их для компоновки?

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

Почему мы все еще используем их для компоновки?

Потому что лучшие альтернативы, такие как CSS Flexible Box Layout Module и CSS Template Layout Module все еще работают над черновиками и не поддерживаются всеми браузерами.

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

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

Являются ли встроенные блоки лучше?

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

Ссылки

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

Ответ 2

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

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

Ответ 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 Play Nice с CSS3 и HTML5 в WordPress

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