Question

我在HTML页面上有一个div，可以在IE8，IE9和其他浏览器中正常工作，但在兼容模式下打开页面时，它无法正确显示。

屏幕左侧应显示一个小（37像素宽）标签。当用户单击选项卡时，它会扩展为200px。在兼容模式下，所有用户都看到37px选项卡，其中包含一些隐藏的内容。

我已将<meta http-equiv="x-ua-compatible" content="IE=5,7,8,9" />添加到页面顶部，但它需要适用于任何版本的IE。

以下是正在使用的标记。

<div id="divChat" 
        style="height:125px; width:100px; top:200px; left:0px; position:fixed; overflow:hidden; -moz-box-shadow: 0px 0px 6px #666666; -webkit-box-shadow: 0px 0px 6px #666666; box-shadow: 0px 0px 6px #666666;">
    <div style="float:right;">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="table-layout:fixed;">
            <tr>
                <td style="width:200px; background-color:#FFFFFF; text-align:center; vertical-align:top; padding-left:10px;">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td class="maintextdark" style=" text-align:left; font-size:21px; font-weight:normal; padding-top:10px;">
                                Have any questions?
                            </td>
                        </tr>
                        <tr>
                            <td class="maintextdark" style="font-size:14px; text-align:left; padding-top:6px;">
                                Ask one of our advisors.
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: left; padding-top: 10px;"  onmouseover="this.style.cursor='pointer'">
                                <div id='LP_DIV_1351175355234' style='width:161px;height:34px;'/>
                            </td>
                        </tr>
                    </table>
                </td>
                <td style="width:37px; height:125;">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td onmouseover="this.style.cursor='pointer'">
                                <img id="imgChatNow" src="images/chatnowout.png" alt="" width="37" height="125" border="0" onmouseout="this.src = setMouseOut(this.src);"
                                    onmouseover="this.src = setMouseOver(this.src);" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>

</div>

这个CSS由JavaScript调用：

<style type="text/css">
    .LivePersonHoverOff
    {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        filter: alpha(opacity=70);
        -moz-opacity: 0.7;
        -khtml-opacity: 0.7;
        opacity: 0.7;
        background-image: url(images/chatonlineout.png);
        }

</style>

这是使用的JavaScript

    <script type="text/javascript">
    $(document).ready(function () {
            $("#LP_DIV_1351175355234").hover(
                                                function () {
                                                    $(this).addClass("LivePersonHoverOff");
                                                },
                                                function () {
                                                    $(this).removeClass("LivePersonHoverOff");
                                                }
                                                );
});
</script>

<script type="text/javascript">
    var chatExpanded = false;

    $(document).ready(function () {
        $("#imgChatNow").click(function () {
            if (chatExpanded == true) {
                $("#divChat").animate({ width: "37px" }, 500, "swing", function () {
                    chatExpanded = false;
                    $("#imgChatNow").attr("src", "images/chatnowout.png");
                    $('#imgChatNow').bind('mouseover', function () {
                        $('#imgChatNow').attr("src", "images/chatnowover.png");
                    });
                    $('#imgChatNow').bind('mouseout', function () {
                        $('#imgChatNow').attr("src", "images/chatnowout.png");
                    });
                });
            } else {
                $("#divChat").animate({ width: "247px" }, 500, "swing", function () {
                    chatExpanded = true;
                    $("#imgChatNow").attr("src", "images/chatnow2over.png");
                    $('#imgChatNow').bind('mouseover', function () {
                        $('#imgChatNow').attr("src", "images/chatnow2over.png");
                    });
                    $('#imgChatNow').bind('mouseout', function () {
                        $('#imgChatNow').attr("src", "images/chatnow2over.png");
                    });
                });
            }
        });
    });
</script>

Answer 1

我已经解决了这个问题。我改变了div的宽度并将其左侧位置设置为负数。

在JavaScript中，我将动画宽度更改为左侧动画，像素数从37到-210和247px更改为0px。

感谢所有回复你时间的人

HTML在IE兼容模式下无法正确显示

1 个答案: