проблема с абсолютным позиционированием в Firefox и Chrome - PullRequest
Новая
       28

проблема с абсолютным позиционированием в Firefox и Chrome

21 голосов
/ 26 августа 2010

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

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

и вот один в chrome

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 для fieldset: 

.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

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

Ответы [ 8 ]

28 голосов
/ 30 октября 2014

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

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

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

7 голосов
/ 26 августа 2010

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

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

2 голосов
/ 30 мая 2011

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

2 голосов
/ 26 августа 2010

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

Для точных результатов, вы всегда должны делать «сброс» в вашем CSS.Это означает удаление полей / отступов из каждого элемента.

Простой сброс: 

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

Поместите это в верхней части CSS.

1 голос
/ 29 ноября 2016

Вместо использования поля используйте left, top, right, bottom. Пример:

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

1 голос
/ 15 сентября 2015

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

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

0 голосов
/ 13 августа 2015

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

0 голосов
/ 06 сентября 2012

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

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

...