max-width: 什么年代了的浏览器不兼容胃疼事件

好久没写点啥了…忙起来懒起来制药效率不如高三…

Safari处理max-width逻辑和chrome略不同
测试版本:
Chrome: 56,58;
Safari: 7.1,10.1(代测);
FireFox: 52

一个用了bootstrap的不知名框架(一开始不是我负责╮(╯_╰)╭),出问题的代码大概长这个样子:

html
<div class="title">
<img src="images.jpg" />
</div>

css
img {max-width: 100%;}
.title.is-sticky {
width: 0px;
transition: 0.35s;
}

另外有事件触发给.title加上/删除.is-sticky
其效果是模拟一个线性划变动画

在父元素宽度大于0时,max-width:100%在Chrome/FireFox和Safari表现一样(正常显示);
但当父元素宽度为0时,max-width:100%在Chrome/FireFox下表现为width:0,而Safari表现为width:initial。
也就是Safari下划变动画是正常的,但是一画完本该被隐藏的图片又显示出来了…

解决方案……:
方案1:给img也带上动态属性.is-sticky;
方案2:在.title下添加样式overflow: hidden。

写完发现这篇东西根本没什么营养orz果然我还是太菜了。

“max-width: 什么年代了的浏览器不兼容胃疼事件”的一个回复

  1. 另外推荐一下https://www.browserstack.com/ 各种浏览器在线测试(虚拟机?)免费使用30分钟…嘛邮箱没有强制验证就多注册几个账号吧~…

发表评论

电子邮件地址不会被公开。 必填项已用*标注