Быстрое решение проблем совместимости веб-браузера с макетом CSS без HACK

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

Эти два метода имеют следующие преимущества:

1. Не нужно использовать ХАК

2. Просто и эффективно, все понятно с первого взгляда.

3. Иерархическая и модульная компоновка.

4. Код более разумен и его легче идентифицировать.

Способ 1. Устраните плавающее смещение, вызванное добавлением внутреннего и внешнего расстояния.

Обычно нам нужно использовать float для размещения DIV в макетах с несколькими столбцами. Обычно мы пишем 3 DIV для макета с тремя столбцами. Мы надеемся добиться следующих эффектов:

Чтобы добиться этого эффекта, мы добавим поля, чтобы столбец можно было располагать напрямую, а также добавим рамку и отступы, чтобы текст внутри не прилипал к границе. Но произошло нечто неожиданное. После написания кода произошла следующая ситуация:

Третья колонна шла внизу. Это не тот эффект, который вам нужен. Итак, давайте проанализируем это. Следуйте общей идее. Общая ширина составляет 800 пикселей, 200 пикселей для левого столбца, 400 пикселей для среднего столбца и 200 пикселей для правого столбца. Это выглядит хорошо, но между этими столбцами должен быть зазор, поэтому вам придется его изменить: 190 пикселей для правого столбца. левый столбец, 400 пикселей для среднего столбца и 190 пикселей для правого столбца. Это нормально?

Но чтобы оно выглядело лучше, вы добавляете рамку. Но я забыл, что граница также увеличит ширину. Кроме того, вы увеличили отступы столбца: 10 пикселей, я запутался, поэтому фактическая ширина становится: левый столбец: ширина 200-внешний интервал, 10-внутренний интервал, 20-граница; 2=168, чтобы не было перекоса. Но вам не кажется, что это немного сложно? Может быть, вам нужен калькулятор? При использовании этого макета в некоторых браузерах будут различия в отображении.

Хорошо, давайте поговорим о моем методе. По иерархическому делению я разделяю верстку и отображение. Макет означает, что в дополнение к ширине и плаванию макет добавляет максимум внешний интервал, чтобы мне было легче рассчитать. Затем мы добавляем еще один DIV в столбец макета специально для отображения границ, внутреннего и внешнего интервала и т. д. Вам не нужно определять ширину, просто адаптируйте ее. Чтобы вам было легче запомнить, я импровизировал стихотворение: фиксированная ширина должна быть плавающей, без границ и пятен, поместите внутрь DIV, и определенный стиль будет работать!

Способ 2: решить проблему отделения внутренних плавающих элементов от внешнего слоя.

Чтобы создать каталог продукции или альбом с фотографиями, мы используем плавающие элементы UL или N. Желаемый эффект следующий:

Но в последнее время дисплей выглядит следующим образом, а внешняя граница переместилась вверх:

Решение этой проблемы на самом деле очень простое.

1. Чтобы решить проблему, вы можете добавить float:left;

2. Другой метод — поместить в конец DIV, чтобы очистить плавающее число после его завершения.

3. Добавьте высоту или ширину внешнего слоя.