Element sometimes not visible on Firefox

There's an element on my page that's visible in Chrome but disappears in Firefox even though it's using the tinymce library that clearly intended it to be visible.

The element is the button in:

<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>
    ...

and it doesn't help to remove the setting aria-hidden="true" (though I don't know why it's there). Some of the relevant CSS is:

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

I found that if I add

padding: inherit;

to the element's style, then the element is always visible, but with improper padding.

I also see that the CSS is getting loaded twice which is not proper, but might not be what's causing the problem.

Can anyone please tell me what's causing the element to become invisible (It's there and can be clicked on but I can't see it)? To see the problem, please go to the page, click on the words "agreeing with I.B.", then click on the "Parshan" button in the toolbar that appears above the text. There is a button at the top right corner of the dialog box which I can't see in Firefox (latest release: 37.0.2).

Also note: When I inspect the element via Firefox, the × often appears immediately.

I'm running on Windows 8.1 64 bit, but the problem is also sometimes seen on Windows 7.

Thanks a lot!!