Chrome浏览器升级后出现的兼容性问题

  2017-09-22 09:18

起因是一个运营妹子说页面某个地方显示有问题,问了一下浏览器是chrome。我心想,我日常开发调试用的都是chrome,chrome应该是最最最不可能出问题的浏览器呀。再一细问,发现是版本问题,我的chrome还停留在59的版本。果然,当我更新到最新版本之后,不止出现一个问题。

含带padding元素的overflow问题

<ul>
  <li>
    <a href="#" >假如这里有一个很长很长很长的标题假如这里有一个很长很长很长的标题</a>
    <span>2017-09-22</span>
 </li>
</ul>
ul li {
 width: 250px;
 overflow: hidden;
 list-style-type: disc;
 list-style-position: inside;
 line-height:38px;
 position: relative;
 padding-right: 100px;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}
ul li span {
 position: absolute;
 right: 0;
 top: 0;
 line-height: 38px;
}

全局设置了box-sizing: borderbox。理想中的效果,标题应当在日期之前截断,在旧浏览器中测试也是如此。

升级之后,标题覆盖了日期。

解决办法:

给链接a标签并添加position: relative样式。

ul li a {
 position: relative;
}

原因:未知,对CSS的理解还是不透彻。

window 与 body 的onscroll

想要实现的动画效果是:当页面滚动到某一个元素时,触发动画效果,最新Chrome测试无效。

检查结果是onscroll绑定的元素问题。之前的习惯性写法是绑定在body上,应该直接绑定在window上。

document.body.onscroll = function(){}

改为:

window.onscroll = function(){}
你好,游客!(点击更改信息)

您的电子邮件不会被公布,带*为必填。


  •   正在提交中,请稍候...
      评论提交成功
    回复 的评论,点击取消回复。