After testing my simple web page in various browsers, I discovered that it only showed a blank white page in Internet Explorer. I combed through my CSS code and identified background = rgba(some stuff) as the unsupported line by IE. However, this particular code is within a div that is not displayed by IE. Any thoughts on what could be causing this issue? You can access the webpage at . Here is the HTML snippet:
<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'>
...
And here is my CSS code:
html, body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#topContainer{
position: relative;
max-width:400px;
margin: auto;
}
#container{
...
}
...
I have been unable to identify any other parts of the code that might be incompatible with IE besides the rgba property. Any suggestions or assistance would be greatly appreciated. Thank you!