次のコードとIE8との互換性に問題があります(元のコードはより複雑ですが、これは問題の骨子を示しています)
Protected Sub btnExpand_Click(sender As Object, e As System.EventArgs)
If btnExpand.Text = "Expand" Then
btnExpand.Text = "Collapse"
lblContent.Text = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
Else
btnExpand.Text = "Expand"
lblContent.Text = "Content"
End If
End Sub
<style type="text/css">
div {padding:10px; margin:20px;}
.Section {width:550px;}
.ClearBoth {clear:both; padding:0px; width:490px; margin:0px;}
</style>
<div>
<div class="Section" style="float:left; background-color:Green;"></div>
<div class="Section" style="float:Right; background-color:Blue;">
<div style="background-color:Yellow;"></div>
<div style="background-color:Red; display:inline-block; float:right;">
<div style="background-color:Orange; display:inline-block;">
<asp:Button ID="btnExpand" runat="server" Text="Expand" onclick="btnExpand_Click" />
<br />
<asp:Label ID="lblContent" runat="server" Text="Content"></asp:Label>
</div>
<div class="ClearBoth"></div>
</div>
<div class="ClearBoth"></div>
<div style="background-color:Fuchsia;"></div>
</div>
</div>
ユーザーが[展開]ボタンをクリックすると、詳細がオレンジ色のDIVに表示されます(注:オレンジ色のDIVは実際には表示されません。この例では、赤色のDIVです)
実際のコードでは、[展開]ボタンをクリックすると、グリッドビューの約10列が再表示されます。この例では、1トンのXをラベルに配置していますが、結果は同じです。
赤いDIVが(左側に)展開され、現在表示されているコンテンツが表示されます。
Chromeをデフォルトのブラウザとして使用してこのコードを作成しました。このコードは、バックアップブラウザ(IE10)でも正常に機能しますが、当社のブラウザ(IE8)では機能しません。
IE8では、赤のDIVがfloat:rightに設定されているかどうかに関係なく、オレンジと赤の両方のDIVが青の親DIVの右側に展開されます。
これがChromeとIE10で機能することを考えると、私のコードは「開発時間」以降のこの瞬間に正しいと思いますが、IE8でこれを機能させる方法を知っている人はいますか?私は昨日、フロート上のW3Cドキュメントを読んで、こことgoogleを表示して検索するのに4時間を費やしました。