Firefox 的 hack 及 问题

Posted 2020-10-10 小白历险记~

 

hack:

@-moz-document url-prefix(){
        #selector{
            display: flex;
            justify-content: space-between;
        }
}

 

问题一：行内元素 a 浮动后，导致位置错乱，暂定原因为父级或本身公用样式设置了  white-space: nowrap;

html:

<nobr>
   <span>通知</span><span id="sel"></span>
</nobr>
<nobr class="nobr">
   <a href="message.aspx" class="moreMsg">更多</a>
</nobr>

css:

.moreMsg{
    /*float:right;*/
    padding-right: 10px;
    padding-top: 5px;
    text-decoration: underline;
    font-size: 13px !important;
    color: #0072c6 !important;    
    
}
.nobr{
    float:right;
}
.ms-titleText.ms-titleText, .ms-titleText > a{
    white-space:normal !important;
}

在 IE7、8、9、10、Edge 及 chrome 下，仅使用 .moreMsg （float:right; 没有注释的情况下）即可有以下效果：

 

而在火狐下，必须去掉加上 

.nobr，
.ms-titleText.ms-titleText, .ms-titleText > a

以上2个类才行，否则会是如下效果：