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;
    }
}

元素有时在Firefox上不可见

1 个答案: