alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2022-11-07
  • 发帖数2749
  • 经验558枚
  • 威望1点
  • 贡献值120点
  • 好评度93点
  • 社区居民
  • 最爱沙发
  • 忠实会员
阅读:1773回复:9

20201217更新「CSS」Chrome式查找栏——moz-box失效(和position:fixed混用)导致的脚本问题

楼主#
更多 发布于:2020-01-09 17:17
从70升到了72.0.1,发现userchrome.css里一个查找栏样式不起作用了,排查了半天原来是moz-box属性失效了。
但是firefox内置的样式还在使用moz-box,所以一开始没怀疑这个,后来把moz-box改成webkit-box查找栏不见了,至少生效了……又加了个z-index属性果然查找栏回来了。
chrome一桶浆糊,mozilla连自家属性都废弃了转用chrome的。



不过mozilla模仿chrome那么多怎么就不把查找栏样式也抄过来,虽然查找栏功能改进了很多,但是界面还是十年前的,又丑又不好用。



下面是css代码,需要的可以拿去用。
--------------------------------------------------------------

经lonely_8指点,可以把webkit-box改成flex,效果一样的,顺便把修改之前border样式的颜色错误。
--------------2020/12/17-----------------
修复firefox84升级后查找栏失踪问题
.browserContainer findbar  {
  -moz-box-ordinal-group: 0;
  position: fixed !important;
  right: 20px;
  top:56px;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, .25) !important;
  border: 1px solid #A7A9AA !important;
  border-radius: 3px 3px 3px 3px;
  transition-property: margin-top, opacity, visibility !important;
  display: flex !important;
  z-index:999 !important;
}
lonely_8
非常火狐
非常火狐
  • UID30273
  • 注册日期2009-09-03
  • 最后登录2022-08-09
  • 发帖数733
  • 经验469枚
  • 威望0点
  • 贡献值86点
  • 好评度147点
  • 社区居民
  • 忠实会员
1楼#
发布于:2020-01-09 19:18
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2022-11-07
  • 发帖数2749
  • 经验558枚
  • 威望1点
  • 贡献值120点
  • 好评度93点
  • 社区居民
  • 最爱沙发
  • 忠实会员
2楼#
发布于:2020-01-09 19:41
怪不得我用moz-box关键词在bugzilla搜不到,bug1582530看了下不懂干嘛的。

flex+order我等下去搜索看看怎么用。

移到上面只是看起来方便,但还是丑,浓缩精简下,按惯例像chrome那样就好看了。
LeoShone
小狐狸
小狐狸
  • UID7490
  • 注册日期2005-07-21
  • 最后登录2020-12-13
  • 发帖数61
  • 经验50枚
  • 威望0点
  • 贡献值26点
  • 好评度1点
3楼#
发布于:2020-12-09 14:08
好用!

有没有查找栏失焦后自动隐藏的脚本?
hmjbat
小狐狸
小狐狸
  • UID49115
  • 注册日期2015-03-04
  • 最后登录2023-01-27
  • 发帖数4
  • 经验4枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
  • 社区居民
  • 忠实会员
4楼#
发布于:2020-12-10 23:15
7月份从55版本换到新版本一直没有找到合适的查找栏,这个真不错,谢谢
hmjbat
小狐狸
小狐狸
  • UID49115
  • 注册日期2015-03-04
  • 最后登录2023-01-27
  • 发帖数4
  • 经验4枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
  • 社区居民
  • 忠实会员
5楼#
发布于:2020-12-19 11:33
84,新更新后,位置不对,都快遮住搜索栏了。
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2022-11-07
  • 发帖数2749
  • 经验558枚
  • 威望1点
  • 贡献值120点
  • 好评度93点
  • 社区居民
  • 最爱沙发
  • 忠实会员
6楼#
发布于:2020-12-20 23:33
hmjbat:84,新更新后,位置不对,都快遮住搜索栏了。回到原帖
84后不能自动贴边导航栏了,要自己调整位置。就是第5行的top那里的数值,调整到适合自己的地方。
hmjbat
小狐狸
小狐狸
  • UID49115
  • 注册日期2015-03-04
  • 最后登录2023-01-27
  • 发帖数4
  • 经验4枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
  • 社区居民
  • 忠实会员
7楼#
发布于:2020-12-21 19:11
谢谢,
kidzgy
火狐狸
火狐狸
  • UID35190
  • 注册日期2011-02-03
  • 最后登录2023-01-16
  • 发帖数235
  • 经验181枚
  • 威望0点
  • 贡献值114点
  • 好评度16点
8楼#
发布于:2020-12-22 16:12
#main-window[sizemode="maximized"] .browserContainer findbar  {
  -moz-box-ordinal-group: 0 !important;;
  position: fixed !important;
  left: 0px;
  top:88px;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, .25) !important;
  border: 1px solid #A7A9AA !important;
  border-top: none !important;
  border-radius: 0 0 3px 3px !important;;
  transition-property: margin-top, opacity, visibility !important;
  display: flex !important;
  z-index:999 !important;
}
#main-window[sizemode="normal"] .browserContainer findbar  {
  -moz-box-ordinal-group: 0 !important;;
  position: fixed !important;
  left: 0px;
  top:97px;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, .25) !important;
  border: 1px solid #A7A9AA !important;
  border-top: none !important;
  border-radius: 0 0 3px 3px !important;;
  transition-property: margin-top, opacity, visibility !important;
  display: flex !important;
  z-index:999 !important;
}

自用的一个样式,是根据最大化窗口和一般窗口自动切换,因为一般窗口,标签上方还有些空隙留白,会导致查找栏覆盖住书签栏什么的。
样式如图所示,根据top参数自行调整。
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2022-11-07
  • 发帖数2749
  • 经验558枚
  • 威望1点
  • 贡献值120点
  • 好评度93点
  • 社区居民
  • 最爱沙发
  • 忠实会员
9楼#
发布于:2020-12-22 16:47
kidzgy:#main-window .browserContainer findbar  {
  -moz-box-ordinal-group: 0 !important;;
  position: fixed !important;
  le...
回到原帖
不错,考虑周到。
游客

返回顶部