плавающие блоки переносятся на следующую строку

Тема в разделе "Верстка", создана пользователем registered, 5 июл 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. registered

    registered Создатель

    Регистр.:
    13 апр 2012
    Сообщения:
    45
    Симпатии:
    4
    написал плагин на jQuery, который меняет ширину элементов так, как необходимо мне.
    всё исправно работает, однако, на некоторых масштабах в большинстве браузеров (кроме оперы) последний плаваюший элемент переносится на следующую строку, хотя не должен.
    например:
    3 div`a, ширина: 20%, 80%, 20%
    итого: 305px, 915px, 305px при ширине документа 1525px
    калькулятор показывает нам, что всё должно уместиться, а IE считает иначе, и переносит последний DIV.

    все числа контролирую тестовыми выводами.
    в скрипте все числа задаются в явном виде, а не процентами, так как при указании в процентах в IE перенос происходил вообще всегда

    сталкивался ли кто-нибудь с подобным?
     
  2. theExtens

    theExtens Создатель

    Регистр.:
    3 янв 2012
    Сообщения:
    15
    Симпатии:
    23
    Если блоки флоатами, то для ие всегда размер приходится задавать немного меньше. Обычно делаю отдельные стили с хаками и фиксами только для ие.
     
  3. ShaDeRzz

    ShaDeRzz

    Регистр.:
    16 окт 2007
    Сообщения:
    176
    Симпатии:
    65
    Разные браузеры вычисляют ширину по-разному.
    Если в одном браузере значение padding включается в указанное значение width (тоесть если widtn:305px; а padding:10px, то width остаётся 305px, а ширина полезной области блока станет 285px;), то в другом браузере результирующая ширина будет составлять width + padding - тоесть 325px. обратите внимание на этот момент.

    Также вы не уточнили версию IE. В IE6 и, если не указан doctype то и в IE7, существует так называемый 3px bug - когда к блоку добавляются 3 лишних пиксела.
     
  4. registered

    registered Создатель

    Регистр.:
    13 апр 2012
    Сообщения:
    45
    Симпатии:
    4
    в целях тестирования все марджины, пэддинги и прочие бордеры убраны вот таким кодом css:
    Код:
    *{
        margin: 0;
        padding: 0;
        border: 0;
    }
    
    например, IE9.
    разница всего один пиксель; это явно какой-то баг:
    стоит уменьшить любой из блоков на один пиксель, как последний блок переносится на место, однако, в конце (справа) появляется полоска в 1 px
     
  5. registered

    registered Создатель

    Регистр.:
    13 апр 2012
    Сообщения:
    45
    Симпатии:
    4
    имеется в виду тег <br /> ?
    его не использовал.

    в общем, пока программно уменьшаю последний блок на 1px.
    конечно, это не сильно заметно, и не особо парит;
    однако, бубен!
    если кто в курсе, как обойтись без бубна - welcome.
     
  6. morke

    morke Создатель

    Регистр.:
    18 июн 2011
    Сообщения:
    25
    Симпатии:
    1
    попробуйте white-space:nowrap; и поменять свойство display у блоков. иногда в ие помогает.
    и используйте reset css, там такие штуки как
    Код:
    *{
        margin: 0;
        padding: 0;
        border: 0;
    }
    
    уже сразу прописаны.
     
  7. drawing4

    drawing4

    Регистр.:
    21 ноя 2008
    Сообщения:
    323
    Симпатии:
    37
    Я чего-то не понял или 20%+80%+20%=120% если вы в процентах указываете.
    По теме:
    У какого-то блока ширина больше чем надо, поэтому все и прыгает. Проверьте margin, padding, border для всех блоков. Может быть во внутреннем блоке margin задан, вариантов много. Если еще не сделали, код в студию, и стили