IE8、IE9、およびその他のブラウザーで正常にdiv機能するHTMLページがありますが、互換モードでページを開くと、正しく表示されません。
画面の左側に小さな（幅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>