首页手记 edge浏览器的兼容问题

edge浏览器的兼容问题

标签：

Html/CSS JQuery JavaScript

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<style>
    body { font-size: 16px; }
    div { margin: 100px auto 0; width: 5rem; height: 100px; background: red; }
</style>
</head>
<body>

<div></div>

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.js"></script>
<script>
$(function() {
    document.documentElement.style.fontSize = '625%';
});
</script>
</body>
</html>

兼容问题成因：
html标签font-size用js加载；
body元素font-size样式用px为单位；
样式表用rem为单位；

兼容方法: body标签字体单位用rem;

点击查看更多内容