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

从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;
}

display: -moz-box + position: fixed 才会出问题，原因：
https://bugzilla.mozilla.org/show_bug.cgi?id=1582530


很多年前moz就抄过，后来又改回去了
https://www.firefox.net.cn/read-47567
https://bugzilla.mozilla.org/show_bug.cgi?id=869543
https://bugzilla.mozilla.org/show_bug.cgi?id=914180

怪不得我用moz-box关键词在bugzilla搜不到，bug1582530看了下不懂干嘛的。

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

移到上面只是看起来方便，但还是丑，浓缩精简下，按惯例像chrome那样就好看了。

好用！

有没有查找栏失焦后自动隐藏的脚本？

7月份从55版本换到新版本一直没有找到合适的查找栏，这个真不错，谢谢

84，新更新后，位置不对，都快遮住搜索栏了。

hmjbat：84，新更新后，位置不对，都快遮住搜索栏了。回到原帖

84后不能自动贴边导航栏了，要自己调整位置。就是第5行的top那里的数值，调整到适合自己的地方。

谢谢，

#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参数自行调整。

kidzgy：#main-window .browserContainer findbar  {
  -moz-box-ordinal-group: 0 !important;;
  position: fixed !important;
  le...回到原帖

不错，考虑周到。