Карта изображения становится видимой при нажатии Microsoft Chart Control в IE, только если на странице есть эталонная страница

введите здесь описание изображения

Если вы внимательно посмотрите на изображение выше, вы увидите хит-бокс, отображаемый на Microsoft Chart Control. Это отображается, когда я нажимаю DataPoint на элементе управления Microsoft Chart. Для 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>

Есть и другие заполнители контента, но я считаю, что это единственный подходящий. Обратите внимание, что я завернул этот заполнитель в теги начальной формы. Это позволяет мне отделить теги «формы» от 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>

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.

Итак... что я могу предположить, так это то, что идентификатор клиента для карты изображения не обрабатывается должным образом в этом сценарии. Уникальный идентификатор изменен тем фактом, что существуют заполнители содержимого. Посмотрите на следующее:

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: я также удалил промежуточную главную страницу. Я чувствовал, что это могло быть большим источником проблем, но эта проблема по-прежнему возникает при использовании только одной главной страницы.

Вкратце: когда мой элемент управления диаграммой находится внутри ContentPlaceHolder, я могу видеть карту изображения, щелкнув левой или правой кнопкой мыши область, содержащую карту изображения. Это происходит только под Internet Explorer.

(редактирование после награды):

  • Я попытался сбросить CSS, используя фрагмент кода CSS, предоставленный Райаном Тернье. Я сослался на него, используя фрагмент кода ниже. Содержимое Dashboard.css было фрагментом кода, предоставленным Райаном. Нет эффекта.

    <link rel="stylesheet" type="text/css" href="../Content/Dashboard/Dashboard.css?t=<%= DateTime.Now.Ticks %>" />
    
  • Я попытался очистить фокус ссылки. Меня беспокоит то, что то, что я нажимаю, на самом деле не ссылка, а изображение с картой, и карта становится видимой. Нет эффекта.

  • Я читал о надстройке Link Scrubber для Adobe Dreamweaver. Это казалось не относящимся к рассматриваемому проекту. Я использую Visual Studio 2k10, но я немного погуглил, пытаясь найти сопоставимые шаги для VS. Я не нашел ни одного.


person Sean Anderson    schedule 18.08.2011    source источник
comment
Я только что начал награду за это. Я чувствую, что изолировал проблему относительно близко к ее отправной точке, но у меня нет идей о том, как протестировать / конструктивно работать над этой проблемой. Я говорил на форумах MSChart, но там город-призрак!   -  person Sean Anderson    schedule 06.09.2011


Ответы (2)


Иногда браузеры могут использовать CSS по умолчанию, если он не определен. Вы пытались очистить все CSS по умолчанию?

Вы можете посмотреть очистку ссылок: http://www.projectseven.com/extensions/info/remscrub/

Вы также можете попробовать: a:focus { layout: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/

person Ryan Ternier    schedule 06.09.2011
comment
Я рассмотрю их и доложу вам. Спасибо вам за ваши предложения. - person Sean Anderson; 07.09.2011
comment
Эй, Райан. Спасибо за ваши предложения, я реализовал каждый из них, но, к сожалению, остался безрезультатным. +1 за ваши предложения и спасибо за то, что заставляете мой мозг думать о других возможных причинах, по которым это может пойти наперекосяк! - person Sean Anderson; 07.09.2011
comment
Спасибо, чувак, извини, это не сработало. Казалось, что вы получаете выделение вокруг карты изображения - известно, что время от времени вокруг них рисуются границы. Если я придумаю что-то еще, я дам вам знать. - person Ryan Ternier; 07.09.2011

На всякий случай добавьте 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 на идентификатор вашего элемента управления, но будьте осторожны, чтобы убедиться, что вы получили правильный тег после его создания.

$('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, который может помочь для IE, по адресу 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();
        }
    }
}
person Kirk    schedule 12.09.2011
comment
Привет. Благодарю за ваш ответ. Я пробовал CSS, не идет. Я не верю, что решением является исправление пунктирной линии IE, поскольку я вообще не вижу пунктирной линии. Он полностью твердый. Кроме того, stackoverflow.com/questions/7392202/ Я смог уменьшить проблему до работающей демонстрации, если вы хотите взглянуть на это. - person Sean Anderson; 13.09.2011
comment
Я не могу скомпилировать эту вещь, так как я не могу заставить элементы управления диаграммой скомпилироваться, независимо от того, сколько я с этим возился. Либо в ASP.NET 3.5, либо в 4.0 он начал использовать всевозможные дополнительные CSS для определенных элементов управления. Это может вызвать проблему, которую вы видите. Я собираюсь отредактировать свой ответ, так как его сложно ввести. - person Kirk; 13.09.2011
comment
Извините за еще один комментарий, но меня только что осенило, почему его можно увидеть только с мастер-страницей. Попробуйте добавить EnableTheming=false в свой ‹%@ Master... %› - person Kirk; 13.09.2011
comment
Я пошел дальше и попробовал ваши предложения, но безрезультатно. Я зашел в консоль разработчика Internet Explorer и отредактировал атрибуты карты, img и окружающего div так, чтобы для всех них было значение hideFocus true или hideFocus hidefocus. Я играл с обоими. Следует отметить, что я обнаружил, что мастер-страница... на самом деле не была чем-то особенным. Эта проблема кажется более связанной с фокусом, чем я думал раньше - я думаю, что раньше я плохо тестировал, когда считал, что удаление главной страницы дало эффект. - person Sean Anderson; 13.09.2011