2

ここに画像の説明を入力してください

上の画像をよく見ると、MicrosoftChartControlでヒットボックスがレンダリングされているのがわかります。これは、MicrosoftChartControlのDataPointをクリックすると表示されます。DataPointにはポストバック値が定義されており、チャートにはOn_Clickイベントハンドラーが実装されています。この画像マップを右クリックまたは左クリックでレンダリングすることができます。

私の設定はそのようなものです：

  • マスターページがある場合を除いて、完全に空の.aspxベースページ。マスターページの設定は、「WebForms」マスターページと「ルート」マスターページがあるという点で少しユニークです。「WebForms」マスターページは「Root」マスターページから継承します。これは、ASP.NETAJAXページがMVCソリューションに統合されているためです。他のブラウザでのこの設定で問題は発生しません。（また、テスト中に、中間のMasterPageへの依存を削除しました。問題はまだ存在していました。マスターページの階層はこの問題の原因ではないと確信しています。）
  • MasterPageFile = "〜/ Views / Shared / WebForm.master"は、私のベースページのMasterPage宣言です。

WebFormMasterPageは次のようになります。

<asp:Content ContentPlaceHolderID="MainContentRoot" runat="server">
    <form id="form1" runat="server">
        <asp:ContentPlaceHolder ID="MainContent" runat="server">
        </asp:ContentPlaceHolder>
    </form>
</asp:Content>

他にもコンテンツプレースホルダーがありますが、これが唯一の関連するものだと思います。このプレースホルダーを開始フォームタグでラップしていることに注意してください。これにより、MVCで通常行われているように、「form」タグをHtml.StartForm（）およびEndForm（）から分離できます。

Root.Master：

<%@ Master Language="C#" Inherits="System.Web.UI.MasterPage" %>
<%@ Import Namespace="CableSolve.Web.Controllers" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContentRoot" runat="server" /></title>
    <asp:ContentPlaceHolder ID="CssContentRoot" runat="server" />
</head>
<body>
    <div id="ContentPlaceHolder" style="height: 100%" class="ui-widget">
        <asp:ContentPlaceHolder ID="MainContentRoot" runat="server" />
    </div>
</body>

繰り返しになりますが、他のプレースホルダーもありますが、関連するのはこれらだけだと思います。ページ上のすべてのCSSを無効にしましたが、まだこれが発生しています。

つまり、このシナリオでは、イメージマップのクライアントIDが適切に処理されていないと推測できます。UniqueIDは、コンテンツプレースホルダーがあるという事実によって変更されます。以下を見てください。

INTERNET EXPLORER 9.0.8112 HTML MARKUP:

<div class="rdContent" id="ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C">

<img id="ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C_Chart_1d08148bad019a4deca8463a12fe211701a0_Chart_1d08148bad019a4deca8463a12fe211701a0" style="width: 979px; height: 1494px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;" alt="" src="/csweb_IISVS2010/Dashboard/ChartImg.axd?i=chart_63c65dfd662c42fd9a14723465b4db62_3.png&g=4b336a3ffbc346309c1eb2197ee6fe4c" useMap="#ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C_Chart_1d08148bad019a4deca8463a12fe211701a0_Chart_1d08148bad019a4deca8463a12fe211701a0ImageMap"/>

<map name="ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C_Chart_1d08148bad019a4deca8463a12fe211701a0_Chart_1d08148bad019a4deca8463a12fe211701a0ImageMap" id="ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C_Chart_1d08148bad019a4deca8463a12fe211701a0_Chart_1d08148bad019a4deca8463a12fe211701a0ImageMap">

GOOGLE CHROME 13.0.782

<div id="ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C" class="rdContent">

<img id="ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C_Chart_1d08148bad019a4deca8463a12fe211701a0_Chart_1d08148bad019a4deca8463a12fe211701a0" src="/csweb_IISVS2010/Dashboard/ChartImg.axd?i=chart_63c65dfd662c42fd9a14723465b4db62_1.png&amp;g=f6ae9770eb0d497187804e384e37a51d" alt="" usemap="#ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C_Chart_1d08148bad019a4deca8463a12fe211701a0_Chart_1d08148bad019a4deca8463a12fe211701a0ImageMap" style="height:1448px;width:983px;border-width:0px;">

<map name="ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C_Chart_1d08148bad019a4deca8463a12fe211701a0_Chart_1d08148bad019a4deca8463a12fe211701a0ImageMap" id="ctl00_ctl00_MainContentRoot_MainContent_RadDock_114c1ddaa93b2a4313a905aa790b7d3b5177_C_Chart_1d08148bad019a4deca8463a12fe211701a0_Chart_1d08148bad019a4deca8463a12fe211701a0ImageMap">

私はWeb開発に比較的慣れていません。これをさらにデバッグしたり、問題にパッチを適用したりするための私のオプションは何ですか？問題を紹介しているのはマスターページであるという事実に遭遇するために、私は暗闇の中で弾丸を撃っていました。

読んでくれてありがとう。乾杯。

編集：互換モードを有効または無効にした場合に発生します。フォームタグをベースページのコンテンツプレースホルダー内に移動しましたが、違いはありませんでした。

EDIT2：中間のマスターページも削除しました。これが大きな問題の原因である可能性があると感じましたが、この問題は、使用されているマスターページが1つだけの場合でも発生します。

TL; DR：チャートコントロールがContentPlaceHolder内にある場合、画像マップを含む領域を左クリックまたは右クリックすると、画像マップを表示できます。これは、InternetExplorerでのみ発生します。

（報奨金後の編集）：

  • Ryan Ternierが提供するCSSコードスニペットを使用して、CSSをリセットしてみました。以下のコードスニペットを使用して参照しました。Dashboard.cssのコンテンツは、Ryanによって提供されたコードスニペットでした。無効。

    <link rel="stylesheet" type="text/css" href="../Content/Dashboard/Dashboard.css?t=<%= DateTime.Now.Ticks %>" />

  • リンクのフォーカスをクリアしてみました。ここでの私の懸念は、私がクリックしているのは実際にはリンクではなく、地図付きの画像であり、地図が表示されるようになっていることです。無効。

  • AdobeDreamweaver用のLinkScrubberアドオンについて読みました。これは、目前のプロジェクトには関係がないようでした。Visual Studio 2k10を使用していますが、VSに匹敵する手順を見つけるために、いくつかのグーグルを実行しました。何も見つかりませんでした。

4

2 に答える 2

1

定義されていない場合、ブラウザがデフォルトでCSSを実行できる場合があります。すべてのデフォルトCSSをクリアしようとしましたか？

リンクスクラブを確認することをお勧めします：http：//www.projectseven.com/extensions/info/remscrub/

次のことも試すことができます：a：focus {outline：none; CSSの}

デフォルトのCSSをクリアする：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

から： http： //meyerweb.com/eric/tools/css/reset/

于 2011-09-06T21:17:53.220 に答える
0

適切な方法として、ディレクティブに追加EnableTheming="false"してください。<%@ Master... %>これは、MasterPageでのみこれが表示されるという症状を説明しています。メニューコントロールでこの問題が発生しました。

このオプションの簡単な説明については、http：//msdn.microsoft.com/en-us/library/ms228176（v = vs.80）.aspxを参照してください。

また、Chartタグ用にアセンブリをロードできないようであるため、例をコンパイルできませんでした。ただし、上記が機能しない場合は、チャートがイメージマップとしてレンダリングされることがわかります。

画像マップタグには、hidefocus必要な処理を実行する必要があるというプロパティがあります。可能であれば、簡単なJavaScriptを追加したり、更新されたCSS属性を試したりできますか？

CSS- http://css-tricks.com/829-removing-the-dotted-outline/

a
{
   outline: 0;
}

代わりにJavascriptオプション-タグをコントロールのIDに変更できますが、生成後に正しいタグを取得するように注意してください。

$('a').focus(function(){
     $(this).attr("hideFocus", "hidefocus");
});

うまくいけば、これはうまくいきます。

元のコメントこれらのCSSプロパティを試しましたか？フォーカスを試しましたが、アクティブではありません。

a:active
{
  outline: none;
  overflow: hidden; /* careful with this one */
}

a:focus
{
  -moz-outline-style: none;
}

また、 http：//haslayout.net/css-tuts/Removing-Dotted-Border-on-Clicked-LinksでIEに役立つJavaScriptを見つけました。

var links = document.getElementById('nav').getElementsByTagName('a');
for ( var i = 0; i < links.length; i++ ) {
    links[i].onmousedown = function () {
        this.blur();
        return false;
    }
    links[i].onclick = function() {
        this.blur();
    }
    if ( /msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent) ) {
        links[i].onfocus = function() {
            this.blur();
        }
    }
}
于 2011-09-12T23:33:08.993 に答える