问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

a标签，在页面初始化时，为何会先呈现原始基础样式，然后才显示正常样式？

头像
盐酥鸡加甘梅粉
    911714

    【正在准备试卷】是个 a 标签，在页面初始化时，为何会先呈现原始基础样式（蓝色、带下划线），然后才显示正常样式？如下 gif 图。

    机型：安卓多个机型
    环境：公司内部 app
    页面是 H5，打开方式是在 app 内部访问。

    目前只在公司内部打包生成的 app 中出现该 bug，其他主流浏览器均无复现。
    自己推测是 webview 渲染问题，但不知具体原因，以及解决方案。
    请问有人碰到过类似问题吗？

    图片描述

    css3html5htmlcss
    阅读 3.9k
    3 个回答
    得票最新
    头像
    盐酥鸡加甘梅粉
      911714
      ✓ 已被采纳

      自问自答
      1、背景补充
      页面采用 flexible.js 的写法。
      flexible.js 在 <head> 中引入。
      2、原因
      flexible.js 在载入后，会判断是否有 body 标签，代码如下：

        // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

      问题的原因就在于没有检测到<body>，所以没有在最开始设置 font-size，而是等到其他内容都载入后，才设置 font-size，导致元素放大。
      3、解决方法
      将flexible.js置于<body>后，其他代码前。

      <body>
    <script src="flexible.js"></script>
    // other codes
</body>
      头像
      Crimsonsmash
        1242

        问题就是在html结构加载完成后css才加载
        一方面不要使用的@import方式引入的css,
        另一方面要把css的引入放在html头部.

        头像
        cocoa
          518616

          感觉像是页面渲染没有跟上路由跳转，是不是应用了懒加载的模式？可以将需要用到的CSS样式进行提前加载

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题