登录页面兼容性问题解决

BUG登记

描述：低版本Edge浏览器，手机浏览器访问登录页面异常

严重程度：阻碍

紧急程度：紧急

我发现部分浏览器登录页面无法正常展示，比如我用edge：

左下角有个登录按钮：

点了以后更不得了：

怎么办呢？

别着急，让我们打开F12看一看，container的样式有报错：

inset是啥？

CSS中的inset属性用于定义物理偏移量，而不用于内联偏移量或逻辑块。此属性可以应用于任何writing-mode属性。

用法:

inset:length|percentage|auto|inherit|initial|unset;

属性值：

• length:它设置一个以px，cm，pt等为单位的固定值。也可以使用负值。其默认值为0px。
• percentage:它与长度相同，但是根据窗口大小的百分比设置大小。
• auto:当需要浏览器确定插入大小时使用它。
• initial:它用于将inset属性的值设置为其默认值。
• inherit:它从其父元素继承inset属性值。
• unset:它用于取消设置inset属性，它是默认值。

有点复杂，别着急，你只要知道，我们一般用它来做绝对定位的，就可以了。

给你看一个例子就明白了。（和其他边距属性一样，遵循 上右下左 原则）

.element {
  position: absolute;
  inset: 0; 
  /* 等同于 `top: 0; right: 0; bottom: 0; left: 0;` */
  inset: 1em 2em; 
  /* 等同于 `top: 1em; right: 2em; bottom: 1em; left: 2em;` */
  inset: 1em 2em 3em; 
  /* 等同于 `top: 1em; right: 2em; bottom: 3em; left: 2em;` */
  inset: 1em 2em 3em 4em; 
  /* 等同于 `top: 1em; right: 2em; bottom: 3em; left: 4em;` */
}

注意：因为这些属性是用来设置left/right/bottom/top,所有需要设置position:relative或position:right；否则没有效果

兼容性：

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/inset

好了，问题找到了，我们改一下写法就能解决问题。

问题解决：

源码获取:

关注下方公众号，回复日记本即可。