老师，关于兼容性的问题

同样的代码，放进谷歌浏览器两张图片都能显示，但是放进IE11就只显示img src的代码，background-image没反应

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

.img{

background-image: url(/img/SKY.png);

height: 200px;

width: 200px;

}

</style>

<body>

<div>

</div>

</div>

</body>

</html>

慕仰7236035 2021-02-23

源自：实战：站点导航组件化 3-2 站点导航HTML结构

收起

3回答

好帮手慕夭夭回答被采纳获得+3积分 2021-02-24 09:50:35

同学你好，问题解答如下：

1、代码在谷歌测试和ie测试结果一样，如下图所示：

谷歌最新版

老师这边的ie也是ie11

2、ie11是支持background-image的，如下是background-image的兼容性

绿色表示支持（兼容），红色表示不支持（不兼容）。同学以后想了解某一个样式的兼容性，可以在这个网站上查询哦。地址如下：

https://caniuse.com/#

3、因为同学所说的问题，在老师的电脑上测试都正常，都是兼容的，没有出现问题。所以考虑是同学那边的浏览器有问题，建议重装一下试一试。

另外，其实ie11官方已经停止维护了。为了ie浏览器会被淘汰，一般可以不用考虑ie兼容性了。

祝学习愉快~

收起回答

慕仰7236035 提问者 #1

我知道了，是IE11浏览器脚本设置的问题

2021-02-24 10:37:29

好帮手慕夭夭 2021-02-23 18:36:47

同学你好，“图片上的文字”是说的图片自身有文字吗？如果是，那么可能因为图片太大，而div本身只设置了200px的宽高，所以无法显示全部。可以给背景图设置background: 100% 100% ，让它自身的100%铺满div。如果说的不是这个，可以详细描述一下，最好把图片上传上来，以便老师定位问题。

祝学习愉快~

收起回答

提问者慕仰7236035 #1

<!DOCTYPE html>
<html lang="Ch">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气</title>
    <link href="bootstrap-3.3.7-dist\css\bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="bootstrap-3.3.7-dist\css\index.css">
    <script src="bootstrap-3.3.7-dist\js\jquery.js"></script>
    <script src="bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>
</head>

<body>
    <div class="BG container-fluid">
        <div class="row">
            <!-- 时间、环温、环湿、露点温度 -->
            <div class="row col-md-12" style="margin: 0 auto;padding-top: 10px;">
                <!-- 时间 -->
                <div class="col-md-3">
                    <div class="img-rounded img text-center">
                        <span class="img_content"></span>
                        <div>
                            <span class="img_content_week"></span><br>
                            <span class="img_content_date"></span>
                        </div>
                    </div>
                </div>
            </div>

 CSS：
 .BG {
    background-color: #303952;
    width: 100%;
}

.img {
    background: url(SKY.png) no-repeat;
    padding: inherit;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.img div {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    line-height: 40px;
}

.img_content {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 100px;
    font-size: 60px;
    padding-right: 10px;
}

.img_content_week {
    color: #fff;
    font-size: 30px;
}

.img_content_date {
    color: #fff;
    font-size: 30px;
}

JS：
var $Time = $(".img_content");
var $week = $(".img_content_week");
var $date = $(".img_content_date");

setInterval(function () {
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var weekArray = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
    var week = weekArray[date.getDay()];
    var hour = date.getHours();
    var minute = date.getMinutes();
    if (minute < 10) minute = "0" + minute;
    var second = date.getSeconds();
    var time = hour + ':' + minute;
    var nyr = year +'-'+ month +'-' + day;
    $('.img_content').html(time);
    $('.img_content_week').html(week);
    $('.img_content_date').html(nyr);
}, 1000);

2021-02-24 08:51:56

提问者慕仰7236035 #2

2021-02-24 08:52:55
提问者慕仰7236035 #3

代码不变，JS和CSS都能在谷歌浏览器上渲染出来，在IE没显示图片出来，我刚开始是用background-image URL来渲染图片，后面发现IE11没反应，换了background，这是因为background-image不兼容IE11吗？
2.以及为什么我写的时间函数为什么不能在IE11上展示出来，在谷歌却可以，这也是不兼容吗？

2021-02-24 08:56:48