Проблема с iframe и IE6 и IE7, вызывающая дополнительное нижнее заполнение - PullRequest
Новая
       26

Проблема с iframe и IE6 и IE7, вызывающая дополнительное нижнее заполнение

1 голос
/ 15 декабря 2009

Я пытаюсь вставить iframe Google Maps на свой веб-сайт. У iframe есть отступ 4px и к нему уже применена граница 1px, но по какой-то причине в IE6 и IE7 к нижней части iframe добавлен дополнительный отступ 3px.

Вы можете увидеть мой тестовый сайт здесь:

http://www.prashantraju.com/test/

Есть ли причина, по которой это происходит, и если да, то есть ли это исправить?

Ответы [ 9 ]

3 голосов
/ 30 октября 2010

Есть способ сделать это без взлома, это просто, поместите ваш IFRAME в DIV.

Пример: 

<div style="width:400px; height:150px;"><iframe 
       width="100%" height="100%"
       marginheight="0" marginwidth="0" frameborder="0" scrolling="no" 
       style="border: #4EAD18 3px solid"
       name="add" id="add" src="/chatbox/testb.html"></iframe></div>

Это исправляет проблему IE6.

С уважением.

Оскар

1 голос
/ 18 июня 2012

ну, это, вероятно, из-за элементов внутри iframe .. так что самый простой способ это исправить - добавить переполнение: скрытое в этот iframe, например: 

<iframe style="overflow: hidden;">

или css. допустим, что код находится внутри div с именем googlemap: 

#googlemap iframe{overflow: hidden;}

ie6 и ie7 имеют проблемы, поэтому я надеюсь, что это поможет ..

1 голос
/ 15 декабря 2009

попробуйте установить следующий CSS и посмотрите, поможет ли он: 

iframe { 
    margin: 0;
    padding: 0;
    padding: 4px;
    border: 1px solid #d5d5d5;
}

.clear { 
    clear: both;
}
0 голосов
/ 22 октября 2013

Это может быть вызвано пробелами в документе внутри iframe, , включая пробелы между элементом <DOCTYPE> и <HTML> и между элементами <HTML> и <HEAD>.

0 голосов
/ 17 декабря 2009

Я обычно начинаю свои CSS с 

{
margin: 0;
padding: 0;
border: 0;
}

Это (универсальный селектор) говорит браузерам не добавлять поля / отступы / границы по умолчанию, а сбрасывать их на «0». Обычно этого достаточно, чтобы избавить вас от проблем с несколькими браузерами.

Но для этого вы уже на полпути, возможно, лучше всего использовать условные комментарии для добавления ie6 css и добавить: 

iframe{
padding-bottom: 0;
}
0 голосов
/ 15 декабря 2009

Проблема со страницей карт Google внутри IFrame. Я не знаю где, и я боюсь вдаваться в подробности ... Возможно, у него есть МБ CSS или что-то в этом роде ... в одну длинную строку ...

Если вы замените страницу Google своей страницей и цветным фоном, вы увидите, что отступы пропали. Придание странице Google цветного фона не показало его, так что, очевидно, что-то еще помимо этого. Возможно, ошибка в коде javascript или в каком-либо коде позиционирования плитки. Редактировать : он действительно отображал цветной фон, так что это просто подтверждает, что он находится на этой странице.

0 голосов
/ 15 декабря 2009

IE 6 и 7, кажется, удваивают нижний отступ. Вы можете проверить это, увеличив padding до большого числа и наблюдая, как дно увеличивается вдвое. Если впоследствии вы установите padding-bottom: 0, это будет правильный размер для этих версий IE.

Я не могу объяснить, почему это происходит. Я думаю, что это, вероятно, связано с тем, что внутри iframe Google есть ряд вложенных iframe, но даже если вы обращаетесь к своему фрейму специально с помощью CSS на основе идентификатора, это все равно происходит.

Я бы просто применил условную таблицу стилей для IE6 и IE7, которая устанавливает padding-bottom: 0. Примерно так: 

<style type="text/css">
iframe { padding: 4px ; border: 1px solid #d5d5d5; }
.clear { clear: both; }
</style>
<!--[if lte IE 7]>
<style type="text/css">
iframe { padding-bottom: 0 }
</style>
<![endif]-->
0 голосов
/ 15 декабря 2009

Вы часто сталкиваетесь с проблемами при настройке верхнего / нижнего отступа и фиксированной высоты, или левого / правого заполнения и фиксированной ширины. Если вы хотите оставить свой код как есть, вы захотите поиграть с чем-то вроде этого. Поместите его на страницу после блока style: 

<!--[if lte IE 7]>
<style type="text/css" media="screen">
    iframe { padding-right: 2px; padding-bottom: 1px }
</style>
<![endif]-->
0 голосов
/ 15 декабря 2009

Насколько я понимаю, это проблема рендеринга в IE6 и IE7. Оба эти браузера имеют некоторые интересные особенности, когда дело доходит до CSS, и похоже, что вы могли их найти.

Возможность справиться с этой причудой - условно установить нижний отступ для IE6 и IE7 равным 1px вместо 4px.

Хак, но добро пожаловать в CSS и IE.

...