元素有時在Firefox上不可見

我的頁面上有一個元素在Chrome中可見，但在Firefox中消失，即使它使用明確希望它可見的tinymce庫。元素有時在Firefox上不可見

元素是按鈕：

<div class="mce-reset" role="application"> 
    <div id="mceu_17-head" class="mce-window-head"> 
     <div id="mceu_17-title" class="mce-title">Add Parshan Link</div> 
     <button class="mce-close" aria-hidden="true" type="button">×</button> 
     <div id="mceu_17-dragh" class="mce-dragh"></div> 
    </div> 
    ...

，它並不能幫助去除設置ARIA隱藏=「真」（雖然我不知道爲什麼它的存在）。一些相關的CSS是：

.mce-window-head .mce-close { 
    position: absolute; 
    right: 15px; 
    top: 9px; 
    font-size: 20px; 
    font-weight: bold; 
    line-height: 20px; 
    color: #858585; 
    cursor: pointer; 
    height: 20px; 
    overflow: hidden; 
} 

.mce-window-head .mce-close { 
    position: absolute; 
    right: 15px; 
    top: 9px; 
    font-size: 20px; 
    font-weight: bold; 
    line-height: 20px; 
    color: #858585; 
    cursor: pointer; 
    height: 20px; 
    overflow: hidden; 
} 

.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset { 
    margin: 0px; 
    padding: 0px; 
    border: 0px none; 
    outline: 0px none; 
    vertical-align: top; 
    background: none repeat scroll 0% 0% transparent; 
    text-decoration: none; 
    color: #333; 
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
    font-size: 14px; 
    text-shadow: none; 
    float: none; 
    position: static; 
    width: auto; 
    height: auto; 
    white-space: nowrap; 
    cursor: inherit; 
    line-height: normal; 
    font-weight: normal; 
    text-align: left; 
    box-sizing: content-box; 
    direction: ltr; 
    max-width: none; 
} 

.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset { 
    margin: 0px; 
    padding: 0px; 
    border: 0px none; 
    outline: 0px none; 
    vertical-align: top; 
    background: none repeat scroll 0% 0% transparent; 
    text-decoration: none; 
    color: #333; 
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
    font-size: 14px; 
    text-shadow: none; 
    float: none; 
    position: static; 
    width: auto; 
    height: auto; 
    white-space: nowrap; 
    cursor: inherit; 
    line-height: normal; 
    font-weight: normal; 
    text-align: left; 
    box-sizing: content-box; 
    direction: ltr; 
    max-width: none; 
} 

button, input[type="submit"], input[type="button"] { 
    background: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6) no-repeat scroll 0 0 #fafafa; 
    border-color: #ccC#ccC#bbb; 
    border-radius: 4px; 
    border-style: solid; 
    border-width: 1px; 
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05); 
    color: #333; 
    cursor: pointer; 
    display: inline-block; 
    font-size: 13px; 
    line-height: 18px; 
    padding: 4px 10px; 
    text-align: center; 
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); 
}

我發現，如果我添加

padding: inherit;

到元素的風格，那麼元素始終是可見的，但與填充不當。

我也看到CSS被加載兩次，這是不正確的，但可能不是什麼導致問題。

任何人都可以請告訴我什麼導致元素變得不可見（它在那裏，可以點擊，但我看不到它）？要查看此問題，請轉至page，單擊「與I.B.商定」，然後單擊文本上方工具欄中的「Parshan」按鈕。對話框右上角有一個按鈕，我在Firefox中看不到（最新版本：37.0.2）。

另請注意：當我通過Firefox檢查元素時，×通常會立即出現。

我在Windows上運行8.1 64位，但問題有時也看到在Windows 7

非常感謝！

來源

2015-05-04 eth

最後，以下導致少量的出現，並在正確的地方的X，但我想這只是一個解決辦法，因爲我仍然不知道是什麼導致了問題：

.mce-window-head .mce-close { 
    padding: inherit; 
    box-shadow: none; 
    .mainContainer.ltr ~ div & { 
     top: 0px; 
     /* @noflip */ right: 0px; 
    } 
    .mainContainer.rtl ~ div & { 
     top: 0px; 
     /* @noflip */ left: 0px; 
    } 
}

來源

2015-05-05 23:45:55 eth

元素有時在Firefox上不可見

回答

相關問題