Проблема с абсолютным позиционированием в firefox и chrome

Я не понимаю, почему FF и Chrome отображают мою страницу по-разному. Здесь скринит его в

firefox: пример firefox http://grab.by/65Bn

и здесь один в хром

chrome: пример chrome http://grab.by/65BB

fieldset имеет относительное положение, и изображение имеет абсолютное положение.

здесь основная структура:

<fieldset class="passenger-info">
  <legend>Passenger 1</legend>
  <div class="remove-me">
    <img src="/images/delete-icon-sm.png" />
  </div>
</fieldset>

в основном изображение объявляется сразу после легенды.

здесь css для набора полей:

.passenger-info {
  background:none repeat scroll 0 0 #F2F2F2;
  border:1px solid #9D240F;
  display:inline;
  float:left;
  margin-bottom:10px;
  margin-right:10px;
  padding:3px 10px;
  position:relative;
  width:350px;
}

и для изображения remove-me:

.remove-me {
  border:1px solid red;
  position:absolute;
  right:0;
  top:0;
}

Это совершенно странно. Я попытался выставить отладку поля, и изображение немного движется вверх, но все же не на углу.

Это сообщение показывает, что FF действительно имеет проблемы с рендерингом полей.

http://www.codingforums.com/showthread.php?t=132624

Есть ли лучший способ сделать исправление без использования конкретного браузера?

Ответы

Ответ 1

Я не могу поверить, что это 4 года и до сих пор не ответил. Я искал все, где для этого ответа. Вот что я сделал, чтобы использовать абсолютную позицию на изображении в наборе полей. Измените свое правое и верхнее позиционирование, чтобы оно работало для вас в Firefox. (оставьте свой оригинальный класс на месте для IE, Chrome, Safari, Opera)

@-moz-document url-prefix() { 
  .remove-me {
    border:1px solid red;
    position:absolute;
    right:0;
    top:0;
  }
}

Это Firefox Hack, о котором я расскажу, работает для каждой версии Firefox. Я использую Firefox версии 33.0.2, поэтому я не могу подтвердить, что это работает в более старых версиях. У меня была такая же проблема на моем сайте. Он выглядел одинаково в IE, Opera, Safari и Chrome. Только в Firefox я заметил, что позиционирование отличается. Это работает!

Ответ 2

Похоже, что Firefox имеет невидимое дополнение или поле, которое помещает элемент в верхнем правом углу текстового пространства. Chrome помещает элемент в верхнем правом углу элемента fieldset за пределы потока текста.

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

Ответ 3

Похоже, что элемент .remove-me может иметь маржу. Обязательно удалите это до добавления абсолютного позиционирования к элементам.

Для получения точных результатов вы всегда должны делать "reset" в своем CSS. Это означает удаление поля/заполнения из каждого элемента.

Простой reset:

* { margin: 0; padding: 0px; }

Поместите это вверху вашего CSS.

Ответ 4

Я использовал экран @media и (-webkit-min-device-pixel-ratio: 0) {} и таким образом исправил свои абсолюты. Он не очень сухой, но он работает.

Ответ 5

Вместо использования поля используйте левый, верхний, правый, нижний. Пример:

position: absolute; top: 10px; left: 20px;

Ответ 6

Я думаю, это потому, что вы не указали высоту div (пассажир-info), которая содержит кнопку; Chrome начинает действовать, когда вы не укажете это.

Ответ 7

Реальное решение - firefox и т.д. не устанавливать значения по умолчанию для верхнего, левого, правого и нижнего.

Я смог исправить свою проблему, установив их правильно.

Ответ 8

У меня была аналогичная проблема с веб-сайтом и изображениями в Chrome, где это неправильно. У меня была позиция в изображении и поле ввода так же, как ваш пример в начале этого сообщения, и я решил это, поставив абсолютное положение в поле ввода и в положение изображения в относительных координатах.

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