Проблемы с переполнением IE и Firefox/ошибка?

Я пытаюсь создать полу-отзывчивый заголовок для сайта, который я создаю, однако я столкнулся с проблемой переполнения IE и Firefox. Chrome, однако работает отлично.Проблемы с переполнением IE и Firefox/ошибка?

Я создал JSFIDDLE, чтобы продемонстрировать, что я имею в виду.

В хроме, вы должны увидеть что-то вроде этого:

enter image description here

Однако в том же Jsfiddle на Firefox и Chrome, нет красной каймы на дне, как это:

enter image description here

Один из способов, по которым я пытался исправить это, заключается в том, чтобы изменить мой css на это:

.header .header-image { 
    position: absolute; 
    overflow: hidden; 
    top:0; 
    bottom:1px; 
    left:0; 
    right:0; 
}

Это работало отлично, но оставил пустое пространство на Google Chrome (выше границы и ниже изображения)

Что является причиной этого и как я могу это исправить, и все еще получить свой желаемый эффект?

источник

2014-09-17 Hunter Mitchell

Любые комментарии о том, как я могу улучшить свой вопрос. Пожалуйста, не спускайте вниз, не объясняя себя. Я бы скорее поставил вопрос. Благодарю. –

Я вижу некоторые вещи, которые, может быть, я не понимаю, почему вы принимаете такой подход, например, позиционирование изображения как абсолютного, есть ли причина для этого? Это потому, что наложение нужно обернуть заголовком? Я пытаюсь исправить это в вашем jsfiddle, и я получаю его, чтобы показать красную рамку, но я сделал это, плавая элементы, поэтому я не знаю, работает ли это для вас, если это произойдет, я создам новый jsfiddle –

для того, чтобы показать красную границу, просто изменить объявление заголовка для .header быть как этот:

.header { 
    min-width: 1100px; 
    position:relative; 
    overflow:hidden; 
    width: 100%; 
    height:350px; 
    border-bottom: 1px solid #FF0000; 
}

Как вы можете видеть, я удалил «дисплей: стол»; декларация, и она отлично работает.

источник

2014-09-17 01:42:20

Спасибо. Я использовал таблицу для вертикального центрирования оверлейного div, но я могу просто поместить ее по-другому. Благодарю. –

-1

Я думаю, что это может иметь какое-то отношение к префиксам для Chrome и Firefox. пример префикса: Android: -webkit- Chrome: -webkit- Firefox: -moz- Internet Explorer: -ms- прошивкой: -webkit- Opera: -о- Safari: -webkit -

источник

2014-09-17 01:26:44 Tom

Это не ответ на все вопросы ... – MindlessRanger

i ment, чтобы поместить его в разделы комментариев извините, я не был уверен в ответе – Tom

Проблемы с переполнением IE и Firefox/ошибка?

ответ

Смежные вопросы