IE8 仅在事件触发后显示 css 内容答案

【问题标题】：IE8 only shows css content after event firedIE8 仅在事件触发后显示 css 内容
【发布时间】：2014-12-17 15:13:26
【问题描述】：

我对 IE8 上 css 中的 :after 选择器有很大的问题：

相关代码：

.required:after {
     content:" *";
     color: red;
}

<table id="loss-theft-case">
    <tbody>
        <tr>
            <td width="250px" colspan="2" class="required">
                <g:message code="losstheft.case.naam.label"/>
            </td>
            <td width="175px" colspan="2">
                <g:textField 
                    class="bigInput border_box naam_disableable x-item-disabled" 
                    name="surname" id="surnameCreateCase" value="${customer.surname}" 
                    readonly="readonly"/>    
            </td>
        </tr>
<!-- ...  -->

<div id="loss-theft-case-dialog" style="display:none">
    <g:include view="lossTheft/createLossTheftCase.gsp"/>
</div>

var lossTheftDialog;

function createLossTheftCaseDialog() {

    // Define dialog to be shown.
    lossTheftDialog = $("#loss-theft-case-dialog").dialog({
        autoOpen: false,
        dialogClass: "no-close",
        minWidth: 500,
        minHeight: 375,
        modal: true,
        resizable: false,
        open: focusTabTimeout,
        title: "Aanmaken verlies & diefstal case",
        buttons: {
            "Cancel": {
                id: "create-case-dialog-cancel-btn",
                text: "Annuleren",
                click: function () {
                    clearMessages();
                    lossTheftDialog.dialog("close");
                    log(SUBMIT_CANCEL_LOSSTHEFT_CASE);
                }
            },
            "OK": {
                id: "create-case-dialog-ok-btn",
                text: "Aanmaken",
                click: function () {
                    createCase();
                    log(SUBMIT_LOSSTHEFT_CASE);
                }
            }
        }
    }).css("font-size", "13px");

（这段代码会打开对话框：）

lossTheftDialog.dialog("open");

在首次加载对话框时，红色 * 不会显示。如果您关闭并重新打开对话框，则会显示红色 *。其他以类似方式构建的对话框也存在同样的问题。

其他细节：
当您单击其中一个必填字段时，* 会神奇地出现。如果您关闭对话框（通过单击“取消”按钮），则在对话框消失之前的那一刻，* 会根据需要显示。如果您从一个字段切换到另一个字段，所有的 * 也会出现。

更多信息：
我无法链接到 jsfiddle，因为这在 IE8 中似乎不起作用。我尝试了上面的代码，但在 IE8 中根本没有给出 *。如果我在 tryit 编辑器中尝试它，它似乎可以工作。

所以，这似乎是一个特定于我们项目中的对话框的问题，但我似乎无法将其隔离。我用谷歌搜索，堆栈溢出，现在整天尝试各种事情，但没有找到解决方案。

一个路径是使用 jQuery 'trigger' 来模拟点击但是唉。

非常感谢任何指针/提示/答案:)

jquery 版本：1.11.1（最低）
jquery UI 1.10.4版

我做使用<!DOCTYPE html>作为页面的第一行。

这是对话框最初的显示方式：（第一张图片）

这是它的外观（并在关闭和打开对话框后出现）。（第二张）

这是点击一些必填字段后的对话框：（第三张图片）

编辑：（回复评论）对话框不是动态的；它应该只在首次加载时根据需要显示必填字段（带有红色 *），但不会，如果您关闭并重新打开对话框或单击其中一个必填字段，则会这样做。

更新：遇到相同问题的其他屏幕不会通过打开和关闭一个屏幕来“治愈”。

【问题讨论】：

Fiddles 在 Internet Explorer 8 中工作，但在 IE 8 中构建 Fiddle 可能非常困难。我建议您在现代版本的 IE（或您可用的任何浏览器）中构建您的 Fiddle，然后共享 /show URL。这个问题对我来说听起来像是一个渲染无效问题。我见过类似的问题。
尝试一些会强制重绘元素的方法。例如，将鼠标悬停在.required 上时设置background-color。这可能会触发要显示的动态内容。

标签： jquery css internet-explorer internet-explorer-8 gsp

【解决方案1】：

我找到了它：D

根据乔纳森的有用提示，我进一步搜索了一下，发现：this post。

我写了一个小帮助方法：

function refreshRequireds(){
    $(".required").parents('tr').addClass('z').removeClass('z');
}

每次打开对话框时，我都会添加这一行：

window.setTimeout(refreshRequireds,100);

现在*是（仅延迟 100 毫秒后）显示 :)))))

我希望其他人会发现这篇文章有用...

【讨论】：