20201217更新「CSS」Chrome式查找栏——moz-box失效(和position:fixed混用)导致的脚本问题 阅读：2391回复：9
从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那样就好看了。 |
#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参数自行调整。 |
|
