0

我有一个div在 IE8、IE9 和其他浏览器中运行良好的 HTML 页面，但是在兼容模式下打开页面时，它无法正确显示。

一个小的（37px 宽）标签应该出现在屏幕的左侧。当用户单击选项卡时，它会扩展为 200 像素。在兼容模式下，用户看到的只是 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>
4

2 回答 2

2

我会为此使用javascript。随便写点东西。（使用 javascript 调整大小和重新定位 div）

（如果你有 png 为什么要使用不透明度。不透明度在旧版浏览器中不起作用。）

于 2012-11-19T15:56:33.170 回答
1

我已经对问题进行了排序。我更改了 div 的宽度并将其左侧位置设置为负数。

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

感谢所有回复您的时间的人

于 2012-11-20T10:10:11.150 回答