0

私のチームが取り組んでいる次のプロジェクトでは、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セレクターを使用しています。可能な限りそれを維持しようとしています。

4

2 に答える 2

1

それに関するドキュメントは見当たりませんが、:hidden が QuirksMode で疑似セレクターとして機能するとは思えません。おそらく代わりに、要素の可視性/表示状態/不透明度と直接比較する必要があります。

于 2013-07-31T14:03:08.713 に答える