Subbay.ru
Вторник, 21.11.2017, 12:30
Мини-чат

Вход на сайт

Архив записей

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Главная » 2017 » Октябрь » 22 » Блочная верстка:решение проблемы с float в ie
06:57
Блочная верстка:решение проблемы с float в ie

Верстка бывает 2 видов: табличная и с помощью блоков. В роли блочного элемента обычно выступает тэг div.
В настоящее время блочная верстка становится крайне популярной. С чем же это связано?

1. Это бывает необходимо для оптимизации сайта для поисковиков. Поисковый робот читает код страницы начиная с самого верха. С помощью блочной верстки мы можем позиционировать элементы таким образом, что в коде они идут в начале документа, а при просмотре в браузере они могут располагаться где угодно. Соответственно, мы всегда можем поместить в начало документа нужный нам текст, включающий ключевые слова, независимо от дизайна сайта.
2. Практически у каждого интернет-представительства есть своя CMS (Система управления сайтом). В таких системах часто можно настраивать расположение блоков, таких как: «баннеры», «популярные статьи», «лидеры продаж».
С использование блочной верстки мы сможем легко спозиционировать эти элементы, например с помощью свойства float.


Все вроде хорошо, но существует такой гадкий браузер Internet Explorer, у которого свои взгляды на рендеринг верстки. Допустим мы хотим сделать 2 тянущихся блока и расположить их в один ряд при помощи свойства float:left. В ie правый блок начинает спрыгивать вниз при ресайзинге браузера.

Это происходит потому, что ie считает общую длину обоих блоков в пикселях, а потом высчитывает проценты и определяет длину в пикселях для каждого блока, причем округляя ее в большую сторону. Пример: длина обоих блоков — 101 пиксель, длина каждого блока — 50%, соответственно в пикселях длина каждого блока 50,5 пикселей. IE округляет эту величину до 51, а в сумме получается 102. Из-за этого и получается так, что блок сдвигается вниз.
Одно из решений этой проблемы придумал Владимир Токмаков из студии Лебедева. Наличие ненулевого внутреннего отступа (padding-right: 1px) у элемента, в котором находятся 2 тянущихся блока, исправляет ошибку в ie. Двойной слэш //padding-right: 1px; перед описанием свойства означает, что его распознает только Internet Explorer. Для того, чтобы в ie не возникало горизонтального скрола, добавляем overflow-x:hidden

<style type="text/css">
    body
    {
    background: #ffffff;
    position:relative;
    margin:0;
    padding:0;
    overflow-x:hidden;
    }

    .columns
    {
    clear: both;
    width: 100%;
    //padding-right: 1px;
    //overflow-x: hidden;
    }
    .columns .a,
    .columns .b
    { float: left; }
    .columns .a { width: 30%; background: #ccffcc; }
    .columns .b { width: 70%; background: #ffcccc; }
    .wrong_columns { clear: both; width: 100%; margin-top: 1em; }
    .wrong_columns .a,
    .wrong_columns .b
    { float: left; }
    .wrong_columns .a { width: 30%; background: #ccffcc; }
    .wrong_columns .b { width: 70%; background: #ffcccc; }
</style>
<div class="columns">
    <div class="a">Колонка шириной 30%</div>
    <div class="b">Колонка шириной 70%, которая не скачет</div>
</div>
<div class="wrong_columns">
    <div class="a">Колонка шириной 30%</div>
    <div class="b">Колонка шириной 70%, которая начнет «прыгать»
        при изменении ширины окна IE</div>
</div>

Просмотров: 24 | Добавил: Rockfeller
Всего комментариев: 0
avatar
Бегущая строка в HTMLWWW.SUBBAY.RU
Copyright Subbay.ru © 2017
uCoz