使用了新技术总会有兼容性问题，一般公司不考虑兼容性问题，但是还是出现诸如样式错乱、无法支持ie、缩放浏览器或屏幕设置比率非100%下的网页错位，作为开发者需要给出友好的提示，提高用户体验。
兼容ie8、不支持以下版本
对象最后一个属性后不要加多余的逗号，IE低版本会报错
兼容ie需要再服务器环境下打开 （可以使用http-server,live-server热更新服务）
因为缩放之后所有内容也会缩放，所以需要把样式改为图片然后同步缩放图片
缩放图片规则为：最初尺寸除以当前比例 例如放大0.2倍就是 477/1.02
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>不许ie,不许缩放</title><style>.suiiewrap {/* position: fixed;left: 0;top: 0;width: 100%;height: 100%;display: none;z-index: 99999; */}.suiiebg {position: fixed;left: 0;top: 0;width: 100%;height: 100%;opacity: .5;background: #000;}.suiiemain {position: fixed;width: 480px;min-height: 360px;padding-bottom: 20px;top: 50%;left: 50%;margin-left: -240px;margin-top: -220px;background: #fff;overflow: hidden;text-align: center;z-index: 99999;}.spmhead {width: 100%;height: 50px;background: #4878bd;color: #fff;position: relative;}.spmhclose {width: 50px;height: 50px;line-height: 50px;text-align: center;position: absolute;right: 0;top: 0;cursor: pointer;}.spmhcloseimg {width: 25px;height: 25px;margin: 12.5px;}.spmcontent {padding: 0 10%;text-align: center;}.spmctitle {text-align: center;font-weight: bold;margin-bottom: 8px;font-size: 18px;}.spmctitledesc {text-align: center;font-weight: bold;font-size: 16px;}.spmctips {color: #8c8c8c;font-size: 14px;text-align: justify;padding: 10px 0;}.spmctsp {margin: 0;padding: 0;margin-bottom: 10px;}.spmctsblue {color: #4878bd;margin: 0 6px;}.spmcimg {width: 40%;margin: 20px;}.spmfnotips {width: 200px;height: 40px;line-height: 40px;text-align: center;margin: 0 auto;background: #4878bd;font-size: 16px;color: #fff;cursor: pointer;}/* 缩放 */.suizoomwrap {/* position: fixed;left: 0;top: 0;width: 100%;height: 100%;display: none;z-index: 99999; */}.suizoombg {position: fixed;left: 0;top: 0;width: 100%;height: 100%;opacity: .5;background: #000;}.suizoomcontent {position: fixed;width: 477px;height: 412px;top: 50%;left: 50%;margin-left: -237px;margin-top: -206px;background: #fff;border-radius: 0;overflow: hidden;text-align: center;z-index: 99999;box-shadow: 0px 0px 13px 0px rgba(6, 193, 174, 0.15);/* box-shadow: 1px 8px 25px 0px rgba(65, 115, 178, 0.1); */}.szcimg {width: 100%;height: 100%;}.szcclose {width: 10.5%;height: 12%;text-align: center;position: absolute;right: 0;top: 0;cursor: pointer;background: #000;opacity: 0;}.szctips {width: 42%;height: 9.8%;text-align: center;margin: 0 auto;background: #4878bd;font-size: 16px;color: #fff;cursor: pointer;position: absolute;left: 29%;bottom: 4.4%;background: #000;opacity: 0;}</style>
</head><body><!-- ie 提示 --><div class="suiiewrap"><!-- <div class="suiiebg"></div> --><div class="suiiemain"><div class="spmhead"><div class="spmhtitle"></div><div class="spmhclose"><img src="./close.png" alt="关闭" class="spmhcloseimg"></div></div><div class="spmcontent"><img src="./warn.png" alt="警告图片" class="spmcimg"><div class="spmctitle">暂不支持IE类型浏览器</div><div class="spmctips"><p class="spmctsp">1. IE浏览器下会出现样式错位等现象</p>本文发布于:2024-01-31 07:40:36，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170665804126773.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
