ブラウザのホームページとして使用するために、外部サイトへの画像リンクを含む jQuery 対応の Web ページを作成しています。関連リンク (開発、ソーシャルなど) の各セットはフォルダーに含まれており、ヘッダーをクリックして展開または折りたたむことができます。これは、Firefox、Chrome、および Safari で正常に機能します。
Internet Explorer で (驚き!) この奇妙な動作が発生します。垂直方向に積み重ねられた 3 つのフォルダーがあるとします。最初のフォルダーを折りたたむと、2 番目と 3 番目のフォルダーとその内容が上に移動してスペースを埋めます。ただし、2 番目のフォルダーの内容はページ上の同じ絶対位置に残ります。
問題を示すために最低限必要なページのカットダウン バージョンを作成しました。ここには、「Red」、「Green」、「Blue」という名前のフォルダーがあり、それぞれに 1 つの画像が含まれています。
赤いヘッダーをクリックすると、青い画像がそのフォルダーと共に上に移動しますが、緑の画像は同じ位置にとどまり、青い画像の後ろになります。
ただし、フォルダーのヘッダー要素と本文要素の境界線スタイルを「無地」ではなく「なし」に設定すると、期待どおりに緑色の画像が他の要素と一緒に移動します。
Web ページ folder.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type='text/javascript' src='jquery-1.7.2.min.js'></script>
<script type='text/javascript' src='folder.js'></script>
<link rel='stylesheet' type='text/css' href='style.css'></link>
<title>Folder Example</title>
</head>
</html>
スタイルシート style.css:
div.folder-header
{
background-color:#f0f0f0;
border-color:#e0e0e0;
border-width:1px;
cursor:pointer;
}
div.folder-body
{
background-color:#f8f8f8;
border-color:#e0e0e0;
border-width:1px;
}
div.link-viewport
{
position:relative;
}
img.link-image
{
position:absolute;
display:block;
border:none;
}
JavaScript ファイル layout.js:
$(document).ready(function()
{
var border = true;
var folder = function(title, src)
{
var section = $('<div>').appendTo('body');
var header = $('<div>').addClass('folder-header').text(title).appendTo(section);
var folder = $('<div>').addClass('folder-body').appendTo(section);
var viewport = $('<div>').addClass('link-viewport').css('width', 64).css('height', 64).appendTo(folder);
var image = $('<img>').addClass('link-image').attr('src', src).appendTo(viewport);
header.css('border-style', border ? 'solid' : 'none');
folder.css('border-style', border ? 'solid' : 'none');
header.click(function()
{
folder.toggle();
});
};
folder("Red", "red.png");
folder("Green", "green.png");
folder("Blue", "blue.png");
});
画像ファイル red.png、green.png、blue.png:
どんな提案もありがたく受け取った！