wordpress 单击辅助功能插件-单击灰度时更改位置

fhg3lkii  于 2022-12-17  发布在  WordPress
关注(0)|答案(1)|浏览(116)

我有一个网站在这里:https://wa-leicester.org.uk,我添加了一个插件,叫做“一键访问”。这个插件在网站的左下角提供了一个绿色的小开关。

似乎只有将切换(及其隐藏菜单)对齐到右上角或左上角的设置,所以我尝试将其全部对齐到屏幕的右下角(视图区域,而不是整个页面),使用以下CSS:

/* icon bottom of nav */
#pojo-a11y-toolbar.pojo-a11y-toolbar-left .pojo-a11y-toolbar-toggle {
    bottom:0 !important;
}
    
/* nav bottom fo screen */
#pojo-a11y-toolbar.pojo-a11y-toolbar-left {
    bottom:20px !important;
}

这似乎是完美的工作除了一件事...
在Chrome中,当我点击菜单中的灰度选项时,整个东西似乎会一直下降到页面底部(对用户来说似乎消失了)。
毫无疑问,这是我自己做的,在CSS代码中遗漏了一些东西,但我无法弄清楚A:why is moves(它似乎只在Chrome中移动)和B:如何修复它。
我以为它可能在切换或隐藏菜单中添加了另一个类,但它所做的似乎只是在body标签中添加了一个新类,用CSS过滤器制作灰度)。
有人能帮忙吗?:)

dvtswwa3

dvtswwa31#

这是webkit-filter应用于body元素的默认行为,如Here所述。最好的解决方案是将webkit过滤器应用于页面元素,而不是包含弹出窗口的body。
一个快速的解决方法是应用top属性,在弹出窗口 Package 上减去弹出窗口高度和底部填充,尽管不同设备的结果可能会有所不同。

#pojo-a11y-toolbar.pojo-a11y-toolbar-left {
    bottom: 20px !important;
    top: calc(100vh - 328px);
}

相关问题