3


1

Internet Explorerの絶対配置とスクロールバー

免責事項

この質問は再投稿です。 私はもともとhttp://doctype.com/absolute-positioning-scroll-bar-internet-explorer [こちら]で尋ねました。 私を助けてくれる親切な人が一人いましたが、彼は最終的には理想的な解決策を見つけることができませんでした。 状況の現実は、DoctypeにはStack Overflowのように膨大な数のユーザーがいないということです。 これは私にとって重要な問題であり、それについてもっと意見が必要です。

問題

HTMLとCSSを使用してツリービューを実装しました。 このツリービューのアイテムにカーソルを合わせると、その下にツールチップが表示されます。 すべてはFirefoxでうまく機能しますが、ChromeやFirefoxでは機能しません。

私の問題は、ツールチップがコンテンツを他の要素の上に表示できるように絶対配置を使用していることです。 Firefoxでスクロールすると、これらのツールチップの位置が移動して、新しい場所が反映されます。 ただし、Internet Explorerは要素の元の位置を保持します。 したがって、スクロールした要素の上にカーソルを置くと、要素が元々あった場所にツールチップが表示されます。

これは、ツリービューに対して相対的な位置を追加することで修正できると読みましたが、ツールチップがページ全体にホバリングしないようにします。

私の問題を説明するためのサンプルコードを次に示します。

  Example







    tooltip example

      Info

       Here is some information about the thing you're hovering over.



    tooltip example

      Info

       Here is some information about the thing you're hovering over.



    tooltip example

      Info

       Here is some information about the thing you're hovering over.



    tooltip example

      Info

       Here is some information about the thing you're hovering over.



    tooltip example

      Info

       Here is some information about the thing you're hovering over.



    tooltip example

      Info

       Here is some information about the thing you're hovering over.



    tooltip example

      Info

       Here is some information about the thing you're hovering over.



    tooltip example

      Info

       Here is some information about the thing you're hovering over.



    tooltip example

      Info

       Here is some information about the thing you're hovering over.



    tooltip example

      Info

       Here is some information about the thing you're hovering over.



    tooltip example

      Info

       Here is some information about the thing you're hovering over.



    tooltip example

      Info

       Here is some information about the thing you're hovering over.



    tooltip example

      Info

       Here is some information about the thing you're hovering over.



    tooltip example

      Info

       Here is some information about the thing you're hovering over.



    tooltip example

      Info

       Here is some information about the thing you're hovering over.



    tooltip example

      Info

       Here is some information about the thing you're hovering over.



    tooltip example

      Info

       Here is some information about the thing you're hovering over.



    tooltip example

      Info

       Here is some information about the thing you're hovering over.



    tooltip example

      Info

       Here is some information about the thing you're hovering over.



    tooltip example

      Info

       Here is some information about the thing you're hovering over.



    tooltip example

      Info

       Here is some information about the thing you're hovering over.



    tooltip example

      Info

       Here is some information about the thing you're hovering over.



    tooltip example

      Info

       Here is some information about the thing you're hovering over.



    tooltip example

      Info

       Here is some information about the thing you're hovering over.





    main

そして、この例のCSSは次のとおりです。

#wrapper
{
}

#tree-view
{
 float: left;
 width: 200px;
 height: 400px;
 background-color: #BBFFFF;
 overflow: auto;
}

#main-content
{
 float: left;
 width: 600px;
 height: 400px;
 background-color: #FFFFBB;
}

#tree-view a
{
 display: block;
 position: relative;
}

#tree-view a span.tooltip
{
 position: absolute;
 z-index: 100;
 display: none;
}

#tree-view a:hover span.tooltip
{
 /* positioning */
 margin-left: 1em;
 margin-top: 1em;
 display: block;
 position: absolute;

 /*formatting*/
 text-decoration: none;
 background: #DDD;
 border: 1px solid #BBB;
 padding: 5px;
 white-space: normal;
 width: 300px;
 color: black;
}

#tree-view .tooltip strong
{
 display: block;
}

#tree-view .tooltip .tooltip-info
{
 display: block;
}

position:相対タグがツールチップアンカーから削除されている場合、ツールチップはFirefoxで正しく表示されます。 ただし、これがないと、Internet Explorerでツールチップが正しく表示されません。

助けてくれてありがとう。

2 Answer


2


私は自分のツールチップの使用をやめ、前にQtip(http://craigsworks.com/projects/qtip/)aに切り替えました。 クロスブラウザでテストされており、インスタンス化が簡単で、見た目も優れています。 あなたがたまたまThemeRollerユーザーである場合、ベータ版(ナイトリービルドで利用可能)はThemeRollerスタイリングを完全にサポートします。 全体として、人生を楽にするためにそれを検討することを強くお勧めします。

JQuery UIの今後のリリースでは、同様の機能がコアに組み込まれます。 Dojo、Prototype、およびMooToolsで同様のスクリプトを使用できます。


1


投稿したコードは、Firefoxですぐに動作します。 IE6ではツールチップは表示されませんが、奇妙なことに、アンカーのホバー状態に背景色を与えることでこれを修正できます…​

#tree-view a
{
 background-color:#ff0000;
}

レイアウトが必要なだけですが、通常のズームは1です。またはposition:relative;同じ効果はありません

以下を使用して、スクロールバーを修復できます…​

#tree-view
{
 overflow: display;
}