元素有时在 Firefox 上不可见

Question

我的页面上有一个元素在 Chrome 中可见，但在 Firefox 中消失了，即使它使用的 tinymce 库显然希望它可见。

元素是按钮：

<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-hidden="true" 也无济于事（尽管我不知道它为什么存在）。一些相关的 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 上也会出现此问题。

非常感谢！！

Answer 1

最后，以下 LESS 导致 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;
    }
}