2

在此处输入图像描述

如果您仔细查看上图，您会看到 Microsoft 图表控件上呈现了一个点击框。当我单击 Microsoft 图表控件上的数据点时，将显示此内容。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>

还有其他内容占位符，但我相信这是唯一相关的。请注意，我已将这个占位符包装在起始表单标签中。这使我可以像 MVC 一样将“表单”标签与 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：我还删除了中间母版页。我觉得这可能是一个很大的问题来源，但是这个问题仍然出现在只使用一个母版页的情况下。

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

  • 我试过清除链接的焦点。我在这里担心的是，我单击的并不是真正的链接，而是带有地图的图像，并且地图变得可见。没有效果。

  • 我阅读了有关 Adob​​e Dreamweaver 的 Link Scrubber 插件。这似乎与手头的项目无关。我正在使用 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

For good measure, add EnableTheming="false" to your <%@ Master... %> directive. This explains your symptom of only seeing this with a MasterPage. I've had this issue with Menu controls.

Take a look at http://msdn.microsoft.com/en-us/library/ms228176(v=vs.80).aspx for a feeble description of this option.

Also, I haven't been able to compile your example because I can't seem to get the assemblies to load for the Chart tags. However if the above doesn't work, from what I understand the chart is rendered as an imagemap.

The image map tag has a property called hidefocus which should do what you want. If possible can you try to add some brief javascript or try an updated CSS attribute?

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

a
{
   outline: 0;
}

Javascript option instead - You can change the a tag to the id of your control but be careful to make sure you get the right one after it's generated.

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

Hopefully this works.

Original Comment Have you tried these CSS properties? I see you've tried focus, but not active.

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

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

Also I found some JavaScript that may help for IE found at http://haslayout.net/css-tuts/Removing-Dotted-Border-on-Clicked-Links

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 回答