Карта изображений становится видимой при нажатии элемента управления Microsoft Chart в IE, только когда страница имеет главную страницу - PullRequest
Новая
       20

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

2 голосов
/ 18 августа 2011

enter image description here

Если вы внимательно посмотрите на изображение выше, вы увидите окно попадания, отображаемое в элементе управления Microsoft Chart. Это отображается, когда я нажимаю на DataPoint в элементе управления Microsoft Chart. В DataPoint определено значение обратной передачи, а в Chart реализован обработчик события On_Click. Я могу сделать так, чтобы эта карта изображения отображалась при щелчке правой или левой кнопкой мыши.

Моя настройка такая:

  • Полностью пустая базовая страница .aspx, за исключением того, что она имеет главную страницу. Настройка главной страницы немного уникальна тем, что есть главная страница "WebForms" и главная страница "Root". Главная страница "WebForms" наследуется от главной страницы "Root". Это потому, что у меня есть страница ASP.NET AJAX, интегрированная в решение MVC. У меня нет проблем с этой настройкой в ​​любом другом браузере. (Также во время тестирования я убрал зависимость от промежуточного MasterPage - проблема все еще присутствовала. Я уверен, что могу сказать, что иерархия главных страниц не является источником этой проблемы.)
  • MasterPageFile = "~ / Views / Shared / WebForm.master" - это объявление MasterPage на моей базовой странице.

Мастер-страница WebForm выглядит примерно так: 

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

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>

Еще раз, есть другие заполнители, но я считаю, что они единственные соответствующие. Я отключил все CSS на страницах, и я все еще вижу это происходящим.

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

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.

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

  • Я попытался сбросить 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. Я не нашел ни одного.

Ответы [ 2 ]

1 голос
/ 07 сентября 2011

Иногда браузеры могут использовать 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/

0 голосов
/ 13 сентября 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-удаление-пунктирный контур / 

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

Также я нашел несколько 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();
        }
    }
}
...