Firefox不符合正确：如预期

Question

因此，我有我的导航丸再次，但我注意到另一个奇怪的问题。我正在使用右图：5px来将我想要的“通知”与移动视图对齐，该视图小于767像素。在Chrome浏览器中看起来很棒，在IE中看起来很棒，但是在Firefox中，两个“通知”跨度完全脱离LI的位置。任何想法为什么Firefox会有这种奇怪的行为？

HTML

<ul id="contentFirstMenu" class="nav nav-pills"> 
    <li><a href="#">Item 1 Title</a><span class="notification">4</span></li> 
    <li><a href="#">Item 2 Title</a><span class="notification">0</span></li> 
    <li><a href="#">Item 3 Title</a></li> 
    <li><a href="#">Item 4 Title</a></li> 
    </ul> 

CSS

#contentContainer { 
    padding: 20px 20px 50px 20px; 
    margin-left: 100px; 
} 

#globalHeader { 
    margin-bottom: 0; 
} 

.notesDropDown > li { 
    border: 1px solid #CCC; 
    width: 132px; 
    height: 35px; 
    text-align: center; 
} 

.notesDropDownInner { 
    text-align: left; 
} 

.notesDropDown li:first-child { 
    border-radius: 5px 0 0 5px; 
} 

.notesDropDown li:last-child { 
    border-radius: 0 5px 5px 0; 
} 

.notesDropDown li:only-child { 
    border-radius: 5px; 
} 

#contentFirstMenu li:first-child { 
    border-radius: 5px 5px 0 0; 
} 

#contentFirstMenu li:last-child { 
    border-radius: 0 0 5px 5px; 
} 

#contentFirstMenu li:only-child { 
    border-radius: 5px; 
} 

#viewFullText section { 
    margin-bottom: 10px; 
} 

.notification { 
    color: #222; 
    position: absolute; 
    background: #fff; 
    line-height: 12px; 
    border: 1px solid #830600; 
    border-radius: 15px; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    font-weight: bold; 
    font-size: 12px; 
    -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2); 
    -moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2); 
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2); 
    padding: 2px 7px; 
} 

.dropdown-menu { 
    min-width: 220px !important; 
    padding: 5px !important; 
} 

.dropdown-toggle .caret { 
    border-top-color: #999 !important; 
    border-bottom-color: #999 !important; 
} 

.notesDropDown li.open .caret, .notesDropDown li:hover .caret { 
    border-top-color: #fff !important; 
    border-bottom-color: #fff !important; 
} 

#contentFirstMenu li.hover > a, #contentFirstMenu li:hover > a, #contentFirstMenu li.active > a, .notesDropDown li.open a, .notesDropDown li:hover a { 
    color: #fff !important; 
} 

#contentFirstMenu > li { 
    position: relative; 
    float: none !important; 
    width: 70px; 
    background-color: #EEE; 
    border: 1px solid #AAA; 
    box-shadow: 0 2px 5px rgba(75, 75, 75, .5); 
} 

#contentFirstMenu a:hover, #contentFirstMenu > .active > a, .notesDropDown a:hover, .notesDropDown > .open > a { 
    background-color: transparent !important; 
    color: #FFF !important; 
} 

#contentFirstMenu a { 
    color: #434343; 
    font-weight: bold; 
    font-size: 12px !important; 
    padding-top: 10px; 
} 

#contentFirstMenu li:active, #contentFirstMenu li:hover, #contentFirstMenu li.active, .notesDropDown > li:hover, .notesDropDown li.open { 
    background-color: #434343; 
} 



#contentContainer div, #contentContainer span, #contentContainer textarea { 
    font-size: 12px; 
    color: #535353; 
} 

#contentFirstMenu{ 
    text-align: center !important; 
    z-index: 100; 
    position: fixed; 
} 

@media screen and (min-width: 768px) { 

    #contentFirstMenu { 
     top: 25%; 
     margin-left: 10px; 
    } 
    #contentFirstMenu a { 
     margin-top: 10px; 
     margin-bottom: 10px; 
    } 
    .notification { 
     left: 60px; 
     top: 40px; 
    } 
} 

/* smartphone css */ 

@media screen and (max-width: 767px) { 
    #contentFirstMenu { 
     bottom: 5px; 
     display: table; 
     z-index: 100; 
     clear: both; 
     position: fixed; 
     text-align: center !important; 
     margin-left: 10px; 
     margin-right: 10px; 
     height: 45px; 
    } 

    #contentFirstMenu > li { 
     float: none !important; 
     display: table-cell !important; 
     width: 25%; 
     background-color: #EEE; 
     border: 1px solid #AAA; 
     margin: auto -5px; 
     box-shadow: 0 2px 5px rgba(75, 75, 75, .5); 
    } 

    .notification { 
     top: -10px; 
     right: 5px; 
    } 

    #contentFirstMenu li:first-child { 
     border-radius: 5px 0 0 5px; 
    } 

    #contentFirstMenu li:last-child { 
     border-radius: 0 5px 5px 0; 
    } 

    #contentFirstMenu li:only-child { 
     border-radius: 5px; 
    } 

    #contentContainer { 
     margin-left: auto; 
    } 
} 

JS滨与例如

http://jsbin.com/ejetat/1/edit

Answer 1

我相信这是与表单元格显示Firefox的理解有问题。

#contentFirstMenu > li { 
... 
    display: table-cell !important; 
... 
} 

尝试改变这一到：

display: inline-block !important; 

我认为Firefox是围绕“CSS表”的结构更加挑剔一点，你似乎并不有一个表行，从而替代，没有测试，你可以尝试包木窗的<ul>在<div>，给那<div>显示：表，并给您一个<ul>display: table-row

希望这有助于。

Answer 2

这是因为你的li是display: table-cell !important;

的

如果你能稍微改变标记有它会没事的链接里面的.notification ..

<li><a href="#">Item 1 Title<span class="notification">4</span></a></li> 

，并给予#contentFirstMenu a一个position:relative

在我在加了我的名字jsbin注释当position:relative是

jsbin：http://jsbin.com/ejetat/2/edit