jQuery 1.7.2 funktioniert nicht in IE8. Funktioniert in anderen Browsern
LÖSUNG 8/9/2012 9:54 EDT
Peinlich, wie es ist, wir waren in der Lage, die Spur der Ausgabe an den browser-Einstellungen. Aktive Skripts deaktiviert wurden. Dank an alle, die gebucht. Ich Schätze Ihre Zeit & Mühe. ~~~~~~~~~~~~~~~~~~~~~~~~~~
Ich habe vor kurzem angefangen auf einem neuen MVC3-Anwendung, und wir sind mit jQuery 1.7.2. Derzeit ist unser code funktioniert in Chrome, Firefox und IE7 & 9. Leider es funktioniert nicht in IE8. Es spielt keine Rolle, was der jQuery-Funktion (mouseover, mouseout, bewegen, klicken, etc.) wir werden versuchen, zu verwenden.
Bisher habe ich habe Folgendes versucht, ohne Glück.
- absolute Pfad Referenz auf jQuery und js-Dateien
- bewegen js-code direkt auf _Layout.cshtml
- überprüfen type="text/javascript"
- reduzieren code einfach Alert("beliebiger text"); und überprüfen Sie in einen alternativen browser
- fügen Sie hintergrund-Farbe
- entfernen Verweis auf "Menu.js" um zu testen, ob die sehr einfachen code, der in Shared.js funktioniert
Ich versuche dem .hover-Aktion auf der _ActionItems Teilansicht. Die jQuery für das ist in Menu.js. Ich dachte, wenn ich kann arbeiten, der rest wird wahrscheinlich eine ähnliche Lösung, die ich herausfinden kann.
Wenn es etwas gibt, was Sie brauchen, um zu sehen, lass es mich wissen. Vielen Dank im Voraus für die Hilfe.
_Layout.cshtml
@using eRecruitBoard.ExtensionMethods
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>@ViewBag.Title</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic' rel='stylesheet' type='text/css'/>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Shared.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Menu.js")" type="text/javascript"></script>
</head>
<body>
<div class="wrapper">
<div class="aboveHeader">
<div class="aboveHeaderLeft">@Html.Partial("_ERBLogo")</div>
<div class="aboveHeaderRight">
<div class="ERBESBButtons">@Html.Partial("_ERBESBButtons")</div>
<div class="welcome">@Html.Partial("_Welcome")</div>
</div>
</div>
<div class="headerBar">
<div class="headerActions">@Html.Partial("_ActionItems")</div>
<div class="headerMenu">@Html.Action("Menu", "Menu")</div>
<div class="headerTitle">@Html.Action("HeaderTitle","Segment")</div>
</div>
<div class="content">
@RenderBody()
</div>
<div class="Push"></div>
</div>
<div class="footerWrapper">
<div class="footer">
<div class="footerLeft"></div>
<div class="footerRight"></div>
<div class="footerRightContent">@Html.ActionLink("Privacy Policy", "PrivacyPolicy", "Home")</div>
<div class="footerLeftContent">© Copyright 2012 - All Rights Reserved</div>
</div>
</div>
</body>
</html>_ActionItems.cshtml
@if (eRecruitBoard.WebLibrary.CommonFunctions.IsAuthenticated)
{
@Html.ImageActionLink("../../Images/Header/FavoriteIcon.png", "FavoritesIcon", "Add", "Favorites", null, null, new { @class = "over", title="Add to favorites", style="border:0;" })<text> </text>
<img src="../../Images/Header/CalendarIcon.png" title="Schedule this report" alt="CalendarIcon" class="over"/><text> </text>
<img src="../../Images/Header/EmailIcon.png" title="Email this report" alt="EmailIcon" class="over"/><text> </text>
<img src="../../Images/Header/PrintIcon.png" title="Print" alt="PrintIcon" class="over"/>
}
else
{
}Shared.js
//Hover image
$(document).ready(function () {
$(function () {
$("img.over").each(function () {
var t = $(this);
var src1 = t.attr("src"); //initial src
var newSrc = src1.substring(0, src1.lastIndexOf(".")); //let's get file name without extension
t.hover(function () {
$(this).attr("src", newSrc + "Over." + /[^.]+$/.exec(src1)); //last part is for extension
}, function () {
$(this).attr("src", newSrc + "." + /[^.]+$/.exec(src1)); //removing 'Over' from the name
});
});
});
});UPDATE - habe ich entfernt menu.js code, so könnte ich hinzufügen, die browser-source. Ich schaue auf den Shared.js code für jetzt als es ist viel einfacher und verursacht keine Handlung, selbst wenn Menu.js ist vollständig entfernt.
Beispiel der browser Quelle - wohlgemerkt dies ist einer der Tests, die ich laufen war, wo ich zog die jQuery direkt auf die Seite, und ich fügte die Warnung. Unabhängig davon, sind diese nicht mehr so gut funktioniert.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>eRecruitBoard</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic' rel='stylesheet' type='text/css'/>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
//Hover image
$(document).ready(function () {
$(function () {
$("#container").hover('',function(){
alert("Out");
});
});
});
$(document).ready(function () {
$(function () {
$("img.over").each(function () {
var t = $(this);
var src1 = t.attr("src"); //initial src
var newSrc = src1.substring(0, src1.lastIndexOf(".")); //let's get file name without extension
t.hover(function () {
$(this).attr("src", newSrc + "Over." + /[^.]+$/.exec(src1)); //last part is for extension
}, function () {
$(this).attr("src", newSrc + "." + /[^.]+$/.exec(src1)); //removing 'Over' from the name
});
});
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="aboveHeader">
<div class="aboveHeaderLeft"><a href="/"><img alt="eRecruitBoard" src="../../Images/eRecruitBoardLogo.png" style="border:0;" /></a></div>
<div class="aboveHeaderRight">
<div class="ERBESBButtons"><img src="../../Images/Header/ERBOn.png" alt="eRecruitBoard On"/><img src="../../Images/Header/ESBOff.png" alt="eScoreBoard Off"/>
</div>
<div class="welcome">Welcome Firstname Lastname
<a href="/Admin/MyTeam">Admin</a> |
<a href="/Home/Logout">Logout</a></div>
</div>
</div>
<div class="headerBar">
<div class="headerActions"><a href="/Favorites/Add"><img alt="FavoritesIcon" class="over" src="../../Images/Header/FavoriteIcon.png" style="border:0;" title="Add to favorites" /></a>
<img src="../../Images/Header/CalendarIcon.png" title="Schedule this report" alt="CalendarIcon" class="over"/>
<img src="../../Images/Header/EmailIcon.png" title="Email this report" alt="EmailIcon" class="over"/>
<img id="container" src="../../Images/Header/PrintIcon.png" title="Print" alt="PrintIcon" class="over"/>
</div>
<div class="headerMenu"><img src="../../Images/Header/MenuIcon.png" id="MenuIcon" title="Click to open the menu" alt="MenuIcon" class="over"/>
<table class="menuTable" id="menuTableId" cellspacing="0" cellpadding="0">
<thead>
<tr class="scrollUpArrow">
<th>
</th>
</tr>
</thead>
<tfoot>
<tr class="scrollDownArrow">
<td>
</td>
</tr>
</tfoot>
<tbody id="contents" class="tablebody" style="overflow:hidden">
<tr class="trmenuClass" id=favoritestrId>
<td class="cellBackground">
<div class="minusSign" id=favoritesMinusSignId>
<div class=favIcon id=divFavoritesid>
<div class="cellName">
Favorites
</div>
</div>
</div>
</td>
</tr>
<tr class="favtrClass" id="submenufavouritestrId">
<td class="subMenuCell" id="idFavorites">
<div class="subMenuCellName">
1st name
</div>
</td>
</tr>
<tr class="favtrClass" id="submenufavouritestrId">
<td class="subMenuCell" id="idFavorites">
<div class="subMenuCellName">
2nd name
</div>
</td>
</tr>
<tr class="favtrClass" id="submenufavouritestrId">
<td class="subMenuCell" id="idFavorites">
<div class="subMenuCellName">
3rd name
</div>
</td>
</tr>
<tr class="trmenuClass" id=dashboardtrId>
<td class="cellBackground">
<div class="minusSign" id=dashboardMinusSignId>
<div class=dashboardIcon id=divDashBoardid>
<div class="cellName">
Dashboard
</div>
</div>
</div>
</td>
</tr>
<tr class="dashboardtrClass" id="submenudashboardtrId">
<td class="subMenuCell" id="idDashboard">
<div class="subMenuCellName">
Dashboard Item 1
</div>
</td>
</tr>
<tr class="dashboardtrClass" id="submenudashboardtrId">
<td class="subMenuCell" id="idDashboard">
<div class="subMenuCellName">
Dashboard Item 2
</div>
</td>
</tr>
<tr class="dashboardtrClass" id="submenudashboardtrId">
<td class="subMenuCell" id="idDashboard">
<div class="subMenuCellName">
Dashboard Item 3
</div>
</td>
</tr>
<tr class="trmenuClass" id=connecttrId>
<td class="cellBackground">
<div class="minusSign" id=connectMinusSignId>
<div class=connectIcon id=divConnectid>
<div class="cellName">
Connect
</div>
</div>
</div>
</td>
</tr>
<tr class="connecttrClass" id="submenuconnecttrId">
<td class="subMenuCell" id="idConnect">
<div class="subMenuCellName">
Joe Smith
</div>
</td>
</tr>
<tr class="connecttrClass" id="submenuconnecttrId">
<td class="subMenuCell" id="idConnect">
<div class="subMenuCellName">
Erin Jones
</div>
</td>
</tr>
<tr class="connecttrClass" id="submenuconnecttrId">
<td class="subMenuCell" id="idConnect">
<div class="subMenuCellName">
Owen Alexander
</div>
</td>
</tr>
<tr class="trmenuClass" id=hiretrId>
<td class="cellBackground">
<div class="minusSign" id=hireMinusSignId>
<div class=hireIcon id=divHireid>
<div class="cellName">
Hire
</div>
</div>
</div>
</td>
</tr>
<tr class="hiretrClass" id="submenuhiretrId">
<td class="subMenuCell" id="idHire" >
<div class="subMenuCellName">
Clair Brown
</div>
</td>
</tr>
<tr class="trmenuClass" id=retaintrId>
<td class="cellBackground">
<div class="minusSign" id=retainMinusSignId>
<div class=retainIcon id=divRetainid>
<div class="cellName">
Retain
</div>
</div>
</div>
</td>
</tr>
<tr class="retaintrClass" id="submenuretaintrId">
<td class="subMenuCell" id="idRetain">
<div class="subMenuCellName">
some good employee name
</div>
</td>
</tr>
<tr class="trmenuClass" id=activityreportstrId>
<td class="cellBackground">
<div class="minusSign" id=activityreportsMinusSignId>
<div class=activityIcon id=divActivityReportsid>
<div class="cellName">
Activity Reports
</div>
</div>
</div>
</td>
</tr>
<tr class="activityreportstrClass" id="submenuactivityreportstrId">
<td class="subMenuCell" id="idActivityReports">
<div class="subMenuCellName">
Activity report 1
</div>
</td>
</tr>
<tr class="activityreportstrClass" id="submenuactivityreportstrId">
<td class="subMenuCell" id="idActivityReports">
<div class="subMenuCellName">
Activity report 2
</div>
</td>
</tr>
<tr class="activityreportstrClass" id="submenuactivityreportstrId">
<td class="subMenuCell" id="idActivityReports">
<div class="subMenuCellName">
Activity report 3
</div>
</td>
</tr>
<tr class="activityreportstrClass" id="submenuactivityreportstrId">
<td class="subMenuCell" id="idActivityReports">
<div class="subMenuCellName">
Activity report 4
</div>
</td>
</tr>
<tr class="activityreportstrClass" id="submenuactivityreportstrId">
<td class="subMenuCell" id="idActivityReports">
<div class="subMenuCellName">
Activity report 5
</div>
</td>
</tr>
<tr class="activityreportstrClass" id="submenuactivityreportstrId">
<td class="subMenuCell" id="idActivityReports">
<div class="subMenuCellName">
Activity report 6
</div>
</td>
</tr>
<tr class="activityreportstrClass" id="submenuactivityreportstrId">
<td class="subMenuCell" id="idActivityReports">
<div class="subMenuCellName">
Activity report 7
</div>
</td>
</tr>
<tr class="activityreportstrClass" id="submenuactivityreportstrId">
<td class="subMenuCell" id="idActivityReports">
<div class="subMenuCellName">
Activity report 8
</div>
</td>
</tr>
<tr class="activityreportstrClass" id="submenuactivityreportstrId">
<td class="subMenuCell" id="idActivityReports">
<div class="subMenuCellName">
Activity report 9
</div>
</td>
</tr>
<tr class="activityreportstrClass" id="submenuactivityreportstrId">
<td class="subMenuCell" id="idActivityReports">
<div class="subMenuCellName">
Activity report 10
</div>
</td>
</tr>
<tr class="activityreportstrClass" id="submenuactivityreportstrId">
<td class="subMenuCell" id="idActivityReports">
<div class="subMenuCellName">
Activity report 11
</div>
</td>
</tr>
<tr class="activityreportstrClass" id="submenuactivityreportstrId">
<td class="subMenuCell" id="idActivityReports">
<div class="subMenuCellName">
Activity report 12
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="headerTitle"><img src="../../Images/Header/TitleArrow.png" alt="Arrow" style="vertical-align:top;"/>
<ul class="segmentControl">
</ul>
</div>
</div>
<div class="content">
<h2>Homepage</h2> - <a href="/Dashboard/All">Link to Dashboard/All</a>
</div>
<div class="Push"></div>
</div>
<div class="footerWrapper">
<div class="footer">
<div class="footerLeft"></div>
<div class="footerRight"></div>
<div class="footerRightContent"><a href="/Home/PrivacyPolicy">Privacy Policy</a></div>
<div class="footerLeftContent">© Copyright 2012 - All Rights Reserved</div>
</div>
</div>
</body>
</html>- Können Sie eingrenzen das problem?
- Oh, und ich habe auch versucht, mit älteren Versionen von jQuery (z.B. 1.5.1)
- Das ist schmerzhaft. Helfen Sie uns, indem Sie uns, was das problem ist. Debug-it ...
- Welche Fehler sind Sie immer in der Developer-Tools für den IE? Außerdem können Sie nach, was der browser zu sehen ist, anstatt der server-Seite code, der es erzeugt?
- Sind Sie eigentlich testen mit IE8, oder so etwas wie IETester? Ich habe Mühe mit diesen tools, die in der Vergangenheit.
- Neben der Verengung es bis auf jQuery im IE8 habe ich nicht in der Lage zu verengen es nicht mehr:( im Grunde in IE8, wirkt es, als ob das jQuery nicht vorhanden ist. Keine Fehlermeldung. Nichts.
- Ist die Website online? Sind wir in der Lage, einen Blick zu nehmen?
- es ist im moment nicht online, aber ich kann in der Lage sein, um die offenen ports zu teilen mit Ihren Jungs an diesem Nachmittag.
- Bitte reproduzieren Sie das problem mit einem kürzeren code.
- VonDeylen - ich bin mit einer tatsächlichen IE8-browser auf unseren server. 8.0.6001.19222 um genau zu sein.
- -1 für " code dump und der Mangel an Forschung.
- Gerbil , ernsthaft? Ich zählte sechs verschiedene versuche, die ich recherchiert und geschrieben in meinem zweiten Absatz. Haben Sie diesen Absatz Lesen?
- Browser Probleme auftreten, sobald der code mittlerweile zu dem browser, so dass die server-side-code ist nur relevant, wenn es ist was zu fehlerhaftem HTML-Code. Allerdings ohne sehen was wird generiert, es gibt keine Möglichkeit zu wissen, wenn das der Fall ist. Wenn Sie sind kurze Zeichen, ersetzen Sie server-side-code mit dem generierten HTML -, und schneiden Sie es zurück zu den wichtigen teilen (insbesondere die
<script>- tags, kann aber auch die gesamte<head>tag). - Schrot Dank. Ich entfernt menu.js code und fügte hinzu, die browser-Quelle für den letzten test war ich laufen. JS-code ist direkt auf der html-Seite entfernen Sie alle Datei-Referenz. Alle entfernt alle Verweise auf menu.js konzentriere Nein ein sehr kleiner test mit .hover.
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Peinlich, wie es ist, wir waren in der Lage, die Spur der Ausgabe an den browser-Einstellungen. Aktive Skripts deaktiviert wurden.
Extras > Internetoptionen > Sicherheit> Klicken Sie auf die Schaltfläche Stufe anpassen > Scrollen Sie zu Scripting > Active Scripting
Dank an alle, die gebucht. Ich Schätze Ihre Zeit & Mühe.
Eine Sache zu beachten hier ist, das Ihr tun dokumentieren.bereit zweimal in diesen Zeilen
Versuchen Sie Folgendes: