当前位置： 文江博客话题详情

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

发布于 2024-11-30 05:04:24 字数 5092 浏览 8 评论 0原文

在此处输入图像描述

如果仔细观察上面的图像，您会看到 Microsoft 图表控件上呈现了一个命中框。当我单击 Microsoft 图表控件上的数据点时，会显示此信息。 DataPoint 定义了回发值，Chart 实现了其 On_Click 事件处理程序。我可以通过右键单击或左键单击来渲染此图像映射。

我的设置是这样的：

  • 完全空的 .aspx 基页，除了它有一个母版页。母版页设置略有独特，因为有一个“WebForms”母版页和一个“Root”母版页。 “WebForms”母版页继承自“Root”母版页。这是因为我有一个集成到 MVC 解决方案中的 ASP.NET AJAX 页面。我在任何其他浏览器中都没有遇到此设置问题。 （此外，在测试过程中，我删除了对中间 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 来说是正常的。

根大师：

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

我对网络开发比较陌生。我有哪些选项可以进一步调试或修复问题？我在黑暗中开枪，结果偶然发现是母版页介绍了这个问题。

感谢您的阅读和您的时间。干杯。

编辑：它发生在启用或禁用兼容模式的情况下。我将表单标签移至基本页面的内容占位符内，没有遇到任何差异。

EDIT2：我还删除了中间母版页。我觉得这可能是问题的一大根源，但仅使用一个母版页时仍然会出现此问题。

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

（赏金后编辑）：

  • 我尝试使用 Ryan Ternier 提供的 CSS 代码片段来重置 CSS。我使用下面的代码片段引用了它。 Dashboard.css 的内容是 Ryan 提供的代码片段。没有效果。

    >

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

  • 我读到了有关 Adob​​e Dreamweaver 的 Link Scrubber 插件的信息。这似乎与手头的项目无关。我正在使用 Visual Studio 2k10，但我做了一些谷歌搜索，试图找到 VS 的类似步骤。我没有找到。

原文

enter image description here

If you look closely at the image above you will see a hit box being rendered on the Microsoft Chart Control. This is being displayed when I click on a DataPoint on the Microsoft Chart Control. The DataPoint has a postback value defined, and the Chart has its On_Click event handler implemented. I am able to cause this image map to render through right-clicking or left clicking.

My setup is such:

  • Completely empty .aspx base page EXCEPT it has a master page. The master page setup is slightly unique in that there is a "WebForms" master page and a "Root" master page. The "WebForms" master page inherits from the "Root" master page. This is because I have an ASP.NET AJAX page integrated into an MVC solution. I experience no issues with this setup in any other browser. (Also, during testing, I removed the dependence on the intermediary MasterPage -- the issue was still present. I am confident in saying that the hierarchy of master pages is not the source of this issue.)
  • MasterPageFile="~/Views/Shared/WebForm.master" is the MasterPage declaration on my base page.

The WebForm MasterPage looks a bit like this:

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

There are other content place holders, but I believe this is the only relevant one. Do note that I have wrapped this place holder in starting form tags. This allows me to separate "form" tags from Html.StartForm() and EndForm() as is normal for MVC.

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

Once again, there are other place holders, but I believe these to be the only relevant ones.
I have disabled all CSS on the pages and I still see this occurring.

So.. what I can assume is that the client ID for the image map is not being properly handled in this scenario. The UniqueID is modified by the fact that there are content place holders. Look at the following:

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

I am relatively new to web development. What are my options for debugging this further, or patching the issue? I was shooting bullets in the dark in order to stumble into the fact that it was the Master Pages introducing the issue.

Thanks for reading and your time. Cheers.

EDIT: It occurs with compatibility mode enabled or disabled. I moved the form tags to within the content place holder of my base page and experienced no differences.

EDIT2: I also removed the intermediary Master Page. I felt that this could've been a large source of problems, but this issue still arises with just one master page being used.

TL;DR: When my chart control is located inside of a ContentPlaceHolder I am able to see the image map when left or right-clicking on the area containing the image map. This only happens under Internet Explorer.

(post-bounty edits):

  • I've tried resetting the CSS by using the CSS code-snippet provided by Ryan Ternier. I referenced it using the code snippet below. Dashboard.css' contents was the code snippet provided by Ryan. No effect.

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

  • I've tried clearing the link's focus. My concern here is that what I'm clicking isn't really a link, it's an image with a map, and the map is becoming visible. No effect.

  • I read about the Link Scrubber add-on for Adobe Dreamweaver. This did not seem relevant to the project at hand. I am using Visual Studio 2k10, but I did some googling around in an attempt to find comparable steps for VS. I found none.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

音盲 2024-12-07 05:04:24

有时，如果未定义 CSS，浏览器可能会默认使用 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/重置/

Sometimes browsers can default a CSS if there is none defined. Haveyou tried to clear all default CSS?

You might want to look at link scrubbing: http://www.projectseven.com/extensions/info/remscrub/

You could also try: a:focus { outline:none; } in a CSS

Clearing Default 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;
}

from: http://meyerweb.com/eric/tools/css/reset/

回复 原文
丿*梦醉红颜 2024-12-07 05:04:24

为了更好地衡量，请将 EnableTheming="false" 添加到您的 <%@ Master... %> 指令中。这解释了您仅在 MasterPage 中看到此情况的症状。我在菜单控件方面遇到了这个问题。

请查看 http://msdn.microsoft。 com/en-us/library/ms228176(v=vs.80).aspx 有关此选项的简单描述。

另外，我无法编译您的示例，因为我似乎无法为图表标签加载程序集。但是，如果上述方法不起作用，根据我的理解，图表将呈现为图像图。

图像映射标签有一个名为 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;
}

我还发现了一些可能对 IE 有帮助的 JavaScript，位于 http:// /haslayout.net/css-tuts/删除点击链接上的点状边框

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

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();
        }
    }
}
回复 原文
~没有更多了~

关于作者

萌︼了一个春

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

qq_VRzBBA45

文章 0 评论 0

痴情

文章 0 评论 0

。

文章 0 评论 0

Mu.

文章 0 评论 0

凉薄对峙

文章 0 评论 0

不落城

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文