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

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

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

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

html

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果然我还是太菜了。

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

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

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

您正在使用您的 WordPress.com 账号评论。 注销 /  更改 )

Twitter picture

您正在使用您的 Twitter 账号评论。 注销 /  更改 )

Facebook photo

您正在使用您的 Facebook 账号评论。 注销 /  更改 )

Connecting to %s

%d 博主赞过: