设置display:inline-block后网页出现异常脚本字符如何修复

通配符选择器*会匹配HTML文档里的所有标签，包括<head>、<meta>、<title>、<link>这类默认display: none、不会在可视区域渲染的头部元素。你给所有元素强制设置display: inline-block后，这些本应隐藏的头部元素被转为可渲染的行内块元素，标签内的文本、浏览器解析属性生成的内部内容直接显示在页面上，就形成了截图里的异常陌生字符。

• 全局样式重置时，不要给所有元素统一设置display属性，只保留通用的基础重置即可：

* {
  padding: 0;
  border: 0;
  margin: 0;
  box-sizing: border-box;
}

• 仅针对<body>内需要用行内块布局的可见元素，单独设置display: inline-block，比如你代码里的顶部栏模块：

.Top_Bar,
.Top_Bar * {
  display: inline-block;
}

提示：<head>内的所有标签都属于文档元信息标签，默认不会被渲染到页面可视区，任何修改这类标签默认display属性的操作都会导致页面出现异常渲染问题。

异常效果参考：

内容的提问来源于stack exchange，提问作者user17173632