CSS: на плавающих div и отрицательных полях

Question

Таким образом, я хотел расположить центрированную разметку с тремя столбцами постоянной ширины, которая была бы совместима с IE и чьи столбцы растянулись бы до одинаковой высоты (равной высоте любого столбца с самым высоким содержанием). Я знаю - продолжай мечтать, верно?

Ну, я почти понял это. После объединения техник, которые я нашел здесь в Stack Overflow, с изящным CSS-хаком для исправления проблем с шириной и трюком выравнивания текста для центрирования, а также экспериментированием с различными значениями полей / отступов, я получил почти идеальный макет. Я делаю это для тети друга, и вы можете посмотреть, что у меня есть на сайте www.allfourseasonslawncare.com/index.php (index.html - это ее оригинальный сайт, за который она заплатила кому-то 500 долларов, чтобы сделать для нее. воссоздание страницы с использованием CSS)

Единственная ошибка, которую я получаю, заключается в том, что в IE левый столбец имеет левое поле размером около 30 пикселей, а все элементы внутри левого столбца имеют второе левое поле размером 30 пикселей.

Я легко могу это исправить, используя трюк html> body, чтобы увеличить IE для отрицательного поля, но я пытаюсь выяснить, откуда исходит это волшебное поле, чтобы найти другое решение. Есть идеи?

Answer 1

Это может быть из-за того, что ваши элементы ul имеют отступ в 30 пикселей.Попробуйте добавить диапазон к каждому элементу списка, а затем добавьте отступ.

Кроме того, в отношении макета вам не нужно добавлять поля для каждого столбца (я вижу, у вас есть поля на .leftRail, .rightRail,так далее).Я заметил, что ваш элемент .columnWrapper имеет ширину всего 615 пикселей, поэтому вы используете отрицательное поле для перемещения этих элементов.

Вместо этого вы можете использовать хак с открытым кодом для эффективного перемещения элементов.(Ссылка для CSS находится ниже, вставьте ее в конец вашего CSS-файла)

После того, как вы поместили clearfix в ваш css, вы переходите к div-обертке, которая оборачивает все столбцы, и просто помещаетеa class = "clearfix" для него.

Затем вы просто перемещаете каждый столбец влево (перемещаете .rightRail вправо), определяете ширину и вуаля!Это должно быть 100% работающее, менее взломанное решение.

Когда вы слишком много взламываете, IE склонен к ошибкам.Прокомментируйте, если вам нужна помощь.

---

Исправление: http://gist.github.com/550114

Answer 2

Итак, вчера я потратил час или два на борьбу с этим, а сегодня утром потратил еще час (публикуя обновления, когда я начал приближаться в качестве комментариев к своему собственному вопросу), и я наконец-то понял это.

В Internet Explorer команда "width: 100%" интерпретируется как полная ширина родительского элемента, а не ширина минус заполнение.Это давало таблице ширину 615 пикселей (ширина центрального столбца).Видя, что это будет выходить за пределы контейнера, Internet Explorer учитывал только левый отступ, а таблица растягивалась на 15 пикселей (размер левого отступа) за правую сторону столбца.

Так как он выходил за пределыстолбец, это переставило все плавающие элементы таким образом, чтобы Internet Explorer казался логичным.Это по какой-то безбожной причине - перемещение левого рельса на расстояние правого отступа (15 пикселей) к правому левого отступа (15 пикселей в центральный столбец), таким образом, перемещая его в общей сложности на30 пикселей в центральном столбце или магическое поле в 30 пикселей.

Решение?Я все еще работаю над этим.В качестве эксперимента я переместил заполнение из #content div в #center div, и это вызвало проблему в Chrome, одновременно решая ее в Internet Explorer.По крайней мере, на первый вопрос был дан ответ.Теперь мы знаем, откуда пришло волшебное поле в 30 пикселей.В качестве быстрого решения я установил постоянную ширину #content div в 585 пикселей и присвоил ей поля вместо отступов.

#center{
    float:left;
    width:615px;
    margin-right:-615px;
}
#content{
    width:585px;
    margin:10px 15px 10px 15px;
}