CSS неправильно позиционируется - Safari

Question

У меня есть веб-страница, которая имеет два элемента div, один слева, другой справа. Я разместил их с помощью float: left / right;

Все хорошо в FireFox, IE (включая IE6 !!!) и Chrome. Но по какой-то причине в Safari правый div появляется под левым div. Итак, я поставил границу вокруг div и заметил, что только в Safari div правой руки считает его частью другого div. Я проверил страницу на предмет div и закрытия div, и все выглядит хорошо.

Я также немного озадачен тем, почему он работает в Chrome, но не в Safari. Являются ли эти два браузера браузерами Webkit ??

Вся помощь приветствуется

Answer 1

«Наиболее общепринятый» метод для выполнения большинства левых / правых делений состоит в том, чтобы плавать оба деления влево, очищая поплавок сразу после.Самый простой способ очистить это добавить div сразу после двух div с помощью следующего:

<div style="clear:both"></div>

Это гарантирует, что что-либо после всплывающих элементов не столкнется со свойствами float, что приведет к каскадудо тех пор, пока они не будут закрыты.

Теперь у некоторых браузеров есть проблемы с полями / отступами (в основном IE).Временно назначьте фон (если его уже нет) и ширину, которая меньше, чем вы ожидаете, - т.е. если вы хотите, чтобы два элемента div, которые оба составляли 50% экрана, присваивают ширину 48% дляцели тестирования.Теперь, это решает проблему?Если это так, Safari может негативно отреагировать на значения float / margin, установленные для этих элементов.Отрегулируйте поля и отступы, промойте, повторите.

Плавающие div-ы основного содержимого могут быстро превратиться в беспорядок, особенно если вы пытаетесь перейти на 100% к родителю или к экрану в целом.Вы можете легко добиться этого с помощью сброса css или моего личного фаворита, системы сетки типа 960.gs В противном случае, вам остается выполнить произвольную настройку, которая либо a) выглядит хорошо только в --most-- браузеры или б) использует болезненные специфичные для браузера таблицы стилей.Нет, спасибо тоже!

Answer 2

Попробуйте, это исправит вашу проблему

.container{ clear:both}
.container .label-info {  float:right; position:relative; min-width:100px;}
.container label {  float:left;}

<div class="container">
  <div class="label-info">Right side</div>
  <label>My Label</label>
</div>