CSS - Поля это плохо?

Question

Я заметил, что некоторые браузеры имеют проблемы с полями, особенно когда элемент перемещается. Например, этот веб-сайт, который я делаю, отлично выглядит в Firefox, но IE7, кажется, полностью облажает поля. Я также проверял это на нескольких браузерах Linux, и некоторые из них делают подобные ошибки.

Сайт http://w3box.com/mat

Насколько я могу судить, в FF3.0 все выглядит отлично. Еще не видел его в FF2 или IE6. Почему это происходит? Это потому, что у меня есть плавающие DIV с указанными полями?

Есть ли какие-то вещи, которых я должен избегать или должен был сделать иначе?

Редактировать: Похоже, мои теги были источником ошибки. Я поместил изображения в то, что не было определено в CSS, и на них были плавающие элементы в сочетании с полями. Они все испортили, и я должен повторить это.

Кроме того, некоторые вещи произошли, когда я вместо этого использовал XHTML Strict :) Спасибо всем! Я постараюсь исправить это самостоятельно:)

Answer 1

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

Answer 2

Нет ничего плохого в использовании полей .

В старых версиях IE есть одна ошибка, и одной этой причины недостаточно, чтобы не использовать одну из основных функций компоновки CSS. В частности, эта ошибка возникает в IE, когда вы перемещаете объект и задаете ему поле в том же направлении, например ::10000

.whatever {
    float: right;
    margin-right: 5px;
}

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

Answer 3

Маркировка не плохая, но IE имеет некоторые проблемы с полями плавающих элементов. Хотя существует множество рецептов для исправления, я считаю, что в вашем случае вы можете использовать абсолютное позиционирование вместо float + margins (вам не нужно поведение «float», когда изображение обернуто текстом)

Answer 4

Различные браузеры имеют разные способы работы с блочной моделью. В большинстве случаев сайты, которые хорошо отображаются в FF, Chrome или IE8, могут иметь проблемы в IE6 и 7. Чтобы обойти эту проблему, вы можете попробовать установить все поля по умолчанию и отступы на 0 (и отрегулировать их при необходимости для определенных элементов):

* {поле: 0px; отступы: 0px; } // Самое простое правило ...

Чтобы узнать больше о сбросе CSS, вы можете посмотреть: http://meyerweb.com/eric/tools/css/reset/

А затем примените различные стили для IE7 и 6 с условными комментариями.

Answer 5

Я бы посоветовал использовать некоторую форму CSS Framework (Blueprint CSS, 960 Grid и т. Д.), Так как они имеют множество полей, отступов и других общих сбросов HTML-элементов. Вы должны найти кросс-браузерную разработку проще, используя фреймворк.

Answer 6

Как уже упоминалось в других ответах, это связано с интерпретацией IE поля модель .

Всякий раз, когда что-либо всплывает, IE стремится удвоить указанные поля. Это можно исправить с помощью дополнительной таблицы стилей для IE, используя условные комментарии .

Смотри также: http://www.positioniseverything.net/explorer/doubled-margin.html