проблема с абсолютным позиционированием в firefox и chrome
Я не понимаю, почему FF и Chrome отображают моя страничка иначе. Вот его скриншот в
firefox: пример firefox http://grab.by/65Bn
и вот один в chrome
chrome: пример chrome http: // grab. by / 65BB
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 {
border:1px solid red;
position:absolute;
right:0;
top:0;
}
это совершенно странно. Я попытался убрать отступы от fieldset, и изображение немного сдвинулось вверх, но все равно не в углу.
Этот пост показывает, что у FF действительно есть проблемы с отображением наборов полей.
http://www.codingforums.com/showthread.php?t=132624
Есть ли лучший способ исправить без использования хакерство для конкретного браузера?
2 ответа
Похоже, элемент .remove-me может иметь поля. Обязательно удалите это перед добавлением абсолютного позиционирования к элементам.
Для получения точных результатов всегда следует выполнять «сброс» в CSS. Это означает удаление полей/отступов из каждого элемента.
Простой сброс:
* { margin: 0; padding: 0px; }
Поместите это вверху вашего CSS.
Похоже, что Firefox имеет невидимый отступ или поле, которое помещает элемент в правый верхний угол текстового пространства. Chrome помещает элемент в правом верхнем углу элемента fieldset вне потока текста.
Одна вещь, которую вы можете сделать, это добавить оболочку div, а затем абсолютно расположить элемент в правом верхнем углу оболочки так, чтобы он лежал над углом набора полей.