0

すべてのブラウザーでテストしたと思っていた、この単純な Web ページがあります。次に、Internet Explorer で試してみましたが、空白の白いページが表示されました。CSS を調べて、IE がサポートしていない行を探し、background = rgba(some stuff) を見つけましたが、これは IE では表示されない div にあります。これを引き起こしている可能性のあるものについて誰か考えがありますか? Web ページは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のものしか見つけることができなかったので、助けていただければ幸いです。ありがとう！

4

2 に答える 2

0

問題が何であるかがわかりました<!DOCTYPE html>-htmlの上部に置くのを忘れていました。それが何をするのかはわかりませんが、すべてを修正しました。ありがとう！サム

于 2013-05-28T19:48:22.413 に答える
0

使ってみるべき

style="visibility:hidden" の代わりに style="display: block"

これが役立つかどうかはわかりません。

しかし、試してみてください

于 2013-05-28T10:53:26.610 に答える