Question

enter image description here

如果仔细查看上图，您会在Microsoft Chart Control上看到一个点击框。当我单击Microsoft Chart Control上的DataPoint时，将显示此信息。 DataPoint定义了一个回发值，并且Chart已实现其On_Click事件处理程序。我可以通过右键单击或左键单击来渲染此图像映射。

我的设置是这样的：

完全清空.aspx基页除了它有一个母版页。主页面设置略显独特，因为有一个“WebForms”母版页和一个“Root”母版页。 “WebForms”母版页继承自“Root”母版页。这是因为我将一个ASP.NET AJAX页面集成到MVC解决方案中。我在任何其他浏览器中都没有遇到此设置问题。（此外，在测试期间，我删除了对中间MasterPage的依赖 - 问题仍然存在。我有信心说母版页的层次结构不是此问题的根源。）
MasterPageFile =“〜/ Views / Shared / WebForm.master”是我的基页上的MasterPage声明。

WebForm MasterPage看起来有点像这样：

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

还有其他内容持有者，但我相信这是唯一相关的内容。请注意，我已将此占位符包装在起始表单标签中。这允许我将“form”标签与Html.StartForm（）和EndForm（）分开，这与MVC一样正常。

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">

我对网络开发比较陌生。我可以选择进一步调试这个问题，还是修补问题？我在黑暗中射击子弹，以便偶然发现这是Master Pages引入问题的事实。

感谢阅读和你的时间。欢呼声。

编辑：启用或禁用兼容模式时发生。我将表单标记移动到我的基页的内容占位符中，没有任何差异。

EDIT2：我也删除了中间母版页。我觉得这可能是一个很大的问题来源，但是这个问题仍然只在使用一个母版页时出现。

TL; DR：当我的图表控件位于ContentPlaceHolder内部时，我可以在左侧或右键单击包含图像映射的区域时看到图像映射。这只发生在Internet Explorer下。

（赏金后编辑）：

我尝试使用Ryan Ternier提供的CSS代码段来重置CSS。我使用下面的代码片段引用了它。 Dashboard.css的内容是Ryan提供的代码片段。没效果。
```
<link rel="stylesheet" type="text/css" href="../Content/Dashboard/Dashboard.css?t=<%= DateTime.Now.Ticks %>" />
```
我尝试清除链接的焦点。我关注的是，我点击的内容并不是真正的链接，它是带有地图的图像，地图变得可见。没效果。
我读到了Adobe Dreamweaver的Link Scrubber插件。这似乎与手头的项目无关。我正在使用Visual Studio 2k10，但我做了一些谷歌搜索，试图找到VS的可比步骤。我找不到。

Answer 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/

Answer 2

为了更好地衡量，请将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选项 - 您可以将a标记更改为控件的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;
}

我还发现了一些JavaScript可能对http://haslayout.net/css-tuts/Removing-Dotted-Border-on-Clicked-Links

中的IE有帮助

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();
        }
    }
}

仅当页面具有母版页时，才能在IE中单击Microsoft Chart Control时显示图像映射

2 个答案: