Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

关于zoom兼容性问题 #3

Open
TsingSu opened this issue Jan 15, 2020 · 0 comments
Open

关于zoom兼容性问题 #3

TsingSu opened this issue Jan 15, 2020 · 0 comments

Comments

@TsingSu
Copy link

TsingSu commented Jan 15, 2020

若博客中未引用DaoVoice在线聊天时,多张图片会显示切换上下张按钮。
若博客中引用DaoVoice在线聊天时,多张图片不会显示切换上下张按钮。

具体原因为引用DaoVoice后,因为未知原因导致页面内会有如下样式:
img.zoom-img { cursor: pointer; cursor: -moz-zoom-out; z-index: 2147483602; transition: all .3s; }
导致.zoom-img在叠加顺序高于.zoom-btn所以图片切换上下张的.zoom-btn显示不出来。

推断DaoVoice的CSS样式可能包含了以下类似于以下内容:
img{z-index: 2147483602;其他样式代码...}

但页面内并没有以下属性:
img.zoom-btn { cursor: pointer; cursor: -moz-zoom-out; z-index: 2147483602; transition: all .3s; }
具体原因未知。

目前我的在修改的方法代码如下(修改zoom.min.js):
.zoom-btn{ z-index: 2 !important; 其他原本CSS样式... }
.zoom-img{ z-index: 1 !important; 其他原本CSS样式... }
通过!important提高.zoom-btn、.zoom-img的z-index优先权,覆盖掉未知原因导致img.zoom-img的z-index

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant