Простая веб-страница, входящая в белый Internet Explorer

У меня есть эта простая веб-страница, которая, как я думал, я тестировал в каждом браузере. Затем я попробовал его в Internet Explorer, и он просто показал пустую белую страницу. Я прошел через свой CSS, ища строки, которые IE не поддерживал, и нашел background = rgba (некоторые вещи), но это в div, не показанном IE. Есть ли у кого-нибудь идеи о том, что может быть причиной этого? Веб-страница находится на http://heather.sh/qr Ниже мой HTML.Простая веб-страница, входящая в белый Internet Explorer

<head> 

<link rel="stylesheet" type="text/css" href="style.css"> 

<script> 
function ifUIWebView() { 
    var is_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent); 
    var isChrome = navigator.userAgent.match('CriOS'); 
    if (isChrome) { 
     var mobile_safari_div = document.getElementById('mobile_safari_div'); 
     mobile_safari_div.innerHTML = mobile_safari_div.innerHTML + '<font size="3" color="black"><b>Chrome does not support contact card download. Please open this page (<a href="http://heather.sh/qr">http://heather.sh/qr</a>) in Mobile Safari.</b></font>'; 
    } 
    else if (is_uiwebview) { 
     var mobile_safari_div = document.getElementById('mobile_safari_div'); 
     mobile_safari_div.innerHTML = mobile_safari_div.innerHTML + '<font size="3" color="black"><b>This browser may not support contact card download. If it doesn\'t work, open this page (<a href="http://heather.sh/qr">http://heather.sh/qr</a>) in Mobile Safari.</b></font>'; 
    } 
} 
</script> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
</head> 
<body> 

<div id='topContainer'><img src="photo.jpg" style="visibility:hidden" width="100%"/> 

<div id='container'> 

<div id='download_button_div'> 
<a href="/qr/download-contact/download.php"><img src="Download Contact.png" id='download_button'></img></a> 
<div id='mobile_safari_div'></div> 
</div> 

<script> 
ifUIWebView() 
</script> 

</div> 
</div> 

</body>

А вот мой CSS:

html, body { 
    margin: 0px; 
    padding: 0px; 
    overflow: hidden; 
} 
#topContainer{ 
    position: relative; 
    max-width:400px; 
    margin: auto; 
} 
#container{ 
    width: 100%; 
    max-width: 400px; 
    height: 100%; 
    margin: auto; 
    background-size: 100%; 
    background-repeat: no-repeat; 
    background-image: url("photo.jpg"); 
    position:absolute; 
    top:0px; 
} 
#download_button { 
    width: 100%; 
} 
#download_button_div { 
    width: 100%; 
} 
#mobile_safari_div { 
    background: rgba(255, 255, 255, 0.5); 
    font-family: 'helvetica'; 
    text-align: center; 
}

Любые идеи о том, что часть несовместима с IE? Как я уже сказал, я попытался пройти и смог найти только вещь rgba, поэтому любая помощь была оценена. Спасибо!

источник

2013-05-28 Sam Heather

Какая версия IE? –

Любые ошибки консоли? Что вы видите, если видите источник? – eidsonator

@BjoernRennhak Я пытался с IE9 –

Вы должны попытаться использовать

стиль = «дисплей: блок» вместо стиля = «видимость: скрытый»

Я не уверен, что это поможет или нет.

Но попробуйте

источник

2013-05-28 10:53:26 SigarDave

Это означает, что img больше не существует. С видимостью: скрытой, изображение становится невидимым, но все еще там, если блок изменит макет страницы, потому что изображение исчезнет. –

О, хорошо. Я сделал это, и теперь в интернет-проводнике макет только что закончился супер странным. Изображение полноэкранное. По крайней мере, это показывает что-то, что я думаю. –

Ok Установите высоту и ширину изображения. – SigarDave

я узнал, что эта проблема - я забыл поставить <!DOCTYPE html> в верхней части HTML. Не уверен, что он делает, но он все исправил. Спасибо! Сэм

источник

2013-05-28 19:48:22

Простая веб-страница, входящая в белый Internet Explorer

ответ

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