Question

我有这个简单的网页，我以为我已经在每个浏览器中测试过了。然后我在Internet Explorer中尝试了它，它只显示了一个空白的白页。我浏览了我的CSS，寻找IE不支持的行，并找到了background = rgba（一些东西），但这是在IE中未显示的div中。有没有人对可能导致这种情况的原因有任何想法？该网页位于http://heather.sh/qr 下面是我的HTML。

<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的东西，所以任何帮助赞赏。谢谢！

Answer 1

你应该尝试使用

style =“display：block”而不是style =“visibility：hidden”

我不确定这会有所帮助。

但试试吧

Answer 2

我发现了问题所在 - 我忘记将<!DOCTYPE html>放在html的顶部。不知道它做了什么，但它修复了一切。谢谢！萨姆

在Internet Explorer中出现白色的简单网页

2 个答案: