簡單的網頁來了Internet Explorer中的白色

我有這個簡單的網頁，我想我已經在每個瀏覽器中測試過。然後我在Internet Explorer中嘗試了它，它只是顯示一個空白的白頁。我瀏覽了我的CSS，查找IE不支持的行，並找到background = rgba（某些東西），但是這是一個未由IE顯示的div。有人可能會對此產生什麼想法嗎？該網頁是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 –

你應該嘗試使用

風格=「顯示：塊」，而不是風格=「visibility：hidden的」

我不知道這將幫助或沒有。

但嘗試

來源

2013-05-28 10:53:26 SigarDave

這意味着img不再存在。可見性：隱藏，圖像不可見，但仍然存在，因爲圖像消失，塊會改變頁面的佈局。 –

噢，好的 - 我已經完成了這個工作，現在在Internet Explorer中佈局已經超級怪異了。圖像是全屏。至少它展示了我猜想的東西。 –

確定設置圖像的高度和寬度.. – SigarDave

我發現了什麼問題了 - 我忘了把<!DOCTYPE html>在HTML的頂部。不知道它做了什麼，但它修復了一切。謝謝！ Sam

來源

2013-05-28 19:48:22

簡單的網頁來了Internet Explorer中的白色

回答

相關問題