私のチームが取り組んでいる次のプロジェクトでは、MVC 4.0/HTML 5 に (ゆっくりと) アップグレードしている ASP.NET/HTML 4 プロジェクトがあります。このセットアップが IE 9 で機能することが要件ですが、多くの理由から、まだ HTML 5 に完全にアップグレードしていません。
:hidden
私が解決しようとしている問題には、jQueryセレクターに基づいてコールアウトを切り替えるという単純なタスクが含まれます。吹き出しを表示することは可能ですが、非表示にすることで問題が発生します。
次のマークアップを含む MVC パーシャルがあります。
<link rel='stylesheet' href='my-styles.css' />
<h4>Information</h4>
<div>
@Html.LabelFor(m => m.PersonName, "Person's Name")
@Html.InputFor(m => m.PersonName)
<a href='#' id='info-link'>[ ! ]</a>
</div>
<div id='info-callout' class='callout hidden'>
<div class='callout-before'></div><div class='callout-main'>
This is the name of the person this form refers to.
</div>
</div>
<script src='this-form.js'></script>
...そして this-form.js の内部:
var MyTeamCallout = function($control, $callout) {
var pub = {};
pub.$control = $control;
pub.$callout = $callout;
pub.RegisterClickEvent = function () {
pub.$control.click(function () {
e.preventDefault();
e.stopPropagation();
// Repositioning of the control removed for purposes of this post.
if(pub.$callout.is(':hidden')) {
pub.$callout.show();
}
else {
pub.$callout.hide();
}
});
}
return pub;
};
// --- Functional Code... -----------------------------------
var $link = $('#info-link'),
$callout = $('#info-callout');
$(document).ready(function () {
var calloutObject = new MyTeamCallout($link, $callout);
calloutObject.RegisterClickEvent();
});
...最後に、指定された CSS で:
.hidden {
display: none;
}
.callout {
position: absolute;
z-index: 2;
/* Left/Top assigned by JavaScript, normally */
}
.callout-before {
position: absolute;
top: 0.5em;
left: -1em;
/* SNIP: Borders are used to create a CSS triangle. */
}
.callout-main
{
position: absolute;
top: 0;
width: 10em;
}
これを IE9 で実行すると、コールアウトが表示されますが、再び非表示になることはありません。F12 開発者ツールで JavaScript エラーが表示されません。
質問::hidden
A) IE9 Quirks Mode
のセレクターとの既知の互換性の問題はありますか? B) もしそうなら、これらの制限を克服するためのより良い手段は何ですか?*
*: 問題の問題は、ここに投稿したものよりも少し複雑ですが、現在のソリューションでは:hidden
セレクターを使用しています。可能な限りそれを維持しようとしています。