javascript - Marquee 在 IE 中拖动我的 css <ul> 内容在 chrome 中完美工作

我正在学校制作网页下拉菜单，并编写了完美的脚本。但是我的菜单被我的字幕拖走了。我已经在 JSfiddle 上发布了代码。链接在这里... http://jsfiddle.net/v4NA2/4/#&togetherjs=OoovMU3HFy

HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"           "http://www.w3.org/TR/html4/loose.dtd">
<title>Lobos Online : Welcome</title>
<body onload="menu.css" style="background-image: url(bg_bluetiles.gif);">
<div align="center">
<table bgcolor="#FFFFFF" border="1" bordercolor="#808080" cellpadding="0"     cellspacing="0" height="0" width="303">
<tbody>
<tr>
<td align="center" height="0%" width="0%">
<table border="0" cellpadding="0" cellspacing="0" width="0%">
<tbody>
<tr>
<td align="center" valign="top">
<a href="http://lhslobos.org/default.htm">
<img src="LHSBanner2013-2014d.jpg" border="0" height="110" width="1118"></a>

</td>
</tr>
</tbody>
</table>
<!-- Unordered List Begins AKA my drop down Menu -->
<ul id="menu">
<li>
<a class="drop" href="index.html">Home</a>

<!-- Begin Home Item -->
</li>
<li class="menu_right">
<a class="drop">Main Directory</a>

<div class="dropdown_1column align_right">
<div class="col_1">
<h3>Links:</h3>
<ul class="simple">
<li><a href="http://lhslobos.org/About-LHS/default.htm">About LHS</a>

</li>
<li><a href="http://lhslobos.org/Academics/default.htm">Academics</a>

</li>
<li><a href="http://lhslobos.org/Administration/default.htm">Administration</a>
</li>
<li><a href="http://lhslobos.org/Athletics/default.htm">Athletics</a>
</li>
<li><a href="http://lhslobos.org/Faculty/default.htm">Faculty</a>
</li>
<li><a href="http://lhslobos.org/Guidance/default.htm">Guidance</a>

</li>
<li><a href="http://lhslobos.org/Student-Life/default.htm">Student Life</a>

</li>
</ul>
</div>
<li>
<a class="drop" href="http://lhslobos.org/About-LHS/community.htm">Community</a>

</li>
</div>
</li>
</ul>
<!-- Unordered List Ends -->
<p><font face="Cambria">
<marquee class="html-marquee">Welcome to Littlerock High School, the home of the Lobos... a place where all students are capable of high academic achievement. </marquee>
</font>

</p>
<table border="2" bordercolor="#003D79" cellpadding="0" cellspacing="0" width="1%">
<tbody>
<tr>
<td>
<a href="http://lhslobos.org/photo_gallery.htm">
<img src="888x570_LHS_SchoolFrontAngle2.jpg" border="0" height="570" width="888"></a>

</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="80%">
<tbody>
<tr>
<td align="center">
<br>
<b><font face="Cambria">
<font color="#495247">LOGIN:&nbsp;
</font><font color="#2F7760">
<a href="https://powerschool.avhsd.org/public/">
<font color="#003D79">PowerSchool</font></a>&nbsp;&nbsp;</font><font color="#808080">|</font><font color="#2F7760">&nbsp;
<a href="http://www.classjump.com/?section=register">
<font color="#003D79">ClassJump</font></a>&nbsp;&nbsp;</font><font color="#808080">|</font><font color="#2F7760">&nbsp;
<a href="http://www.apexvs.com/ApexUI/default.aspx">
<font color="#003D79">Apex Learning</font></a>&nbsp;&nbsp;</font><font color="#808080">|</font><font color="#2F7760">&nbsp;
<a href="http://gapps.avhsd.org/"><font color="#003D79">Google Apps</font></a></font></font></b>

</td>
</tr>
</tbody>
</table>
<p class="logo_main"><b>
<font size="2"><font color="#495247" face="Cambria">Quick Links:</font><span style="TEXT-DECORATION: none"><font color="#495247" face="Cambria">&nbsp;
</font><font color="#ffffff" face="Cambria">
<a href="http://avdistrict.org/sarc"><font color="#495247">SARC</font></a></font></span><font face="Cambria"><font color="#495247">
&nbsp;|&nbsp;
</font>
<a href="http://lhslobos.org/about-lhs.htm/SPSA%202012_13%20LHS.pdf">
<font color="#495247">SPSA</font></a><font color="#495247">&nbsp; |</font></font><font color="#495247" face="Cambria">&nbsp; </font><font color="#004600" face="Cambria">
<span style="TEXT-DECORATION: none">
<a target="_self" href="http://www2.ed.gov/programs/titleiparta/index.html">
<font color="#495247">NCLB</font></a></span></font><font color="#495247" face="Cambria"> 
&nbsp;|&nbsp;
</font>
<span style="TEXT-DECORATION: none">
<font color="#c0c0c0" face="Cambria">
<a href="http://www.avdistrict.org/"><font color="#495247">AVHSD</font></a></font></span><font color="#495247" face="Cambria">&nbsp; 
|&nbsp; </font><font color="#ffffff" face="Cambria"><u>
<a href="http://www.cde.ca.gov/be/st/ss/index.asp">
<font color="#495247">CA Standards</font></a></u></font><font color="#495247" face="Cambria">&nbsp; 
|&nbsp;
</font><font color="#494949" face="Cambria">
<a href="http://www.mylocker.net/california/littlerock/littlerock-high-school/index/index.html">
<font color="#495247">My Locker</font></a></font><font color="#495247" face="Cambria">&nbsp; 
|&nbsp;
</font></font><font color="#ffffff" face="Cambria">
<a href="http://webstores.activenetwork.com/school-software/littlerock_lobos_onl/">
<font color="#495247" size="2">Web Store</font></a></font></b>

</p>
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" valign="bottom" width="0%">
<img border="0" src="StopBullyingSafeSchoolZone.png" width="75" height="75">
</td>
<td align="center" valign="top" width="0%"> <font color="#495247" face="Cambria" size="2">Antelope Valley Union 
High School District Disclaimer:<br>
<br>Any personal opinions expressed on Antelope Valley Union 
High School District (AVUHSD) sites are not those of the school or 
school district. <br>All outside links were deemed educationally 
appropriate at the time of inclusion on AVUHSD web pages. <br>Any 
opinions expressed are not those of AVUHSD. Linked pages are the 
sole property of the creator and not AVUHSD. Information is provided 
without warranties.
<br>The AVUHSD assumes no responsibility for any harm or damage that 
may be incurred by users for the content of any site to which 
district pages may be linked. <br>References to products, services, 
or publications does not imply endorsement.</font>

<p><font size="2" face="Cambria" color="#495247">Littlerock High School 
- 10833 E Ave R - Littlerock, CA 93550 - 661-944-5209 - Fax 
661-944-5191 - Website Prepared by
</font><font size="2"><font face="Cambria" color="#494949">
<a href="Academics/webmanagershistory/default.htm"><font color="#495247">LHS Web 
Managers</font>

</a>
</font><font face="Cambria" color="#495247">
&nbsp;</font></font><i><font color="#6b6d6b" face="Times New Roman"><a style="TEXT-DECORATION: none" href="Faculty/sbooth.htm"><font color="#495247" size="4">☺</font></a></font></i><font size="2" face="Cambria" color="#495247"></font>

</p>
</td>
<td align="right" valign="bottom" width="0%">   <a href="http://www.cde.ca.gov/">
<font color="#495247">
<img src="CA_DofE_Seal.png" border="0" height="85" width="85"></font></a>

</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

CSS

/* Color List */

/* #00A000 - Kelly Green */

/* Royal Blue #074BA0 */

/* Marquee Customized */
.html-marquee {
border:0 dashed #2F7760;
height:20px;
width:1075x;
background-color: #2F7760;
font-family:Cambria;
font-size:16px;
color: #FFFFFF;
font-style: italic;
font-weight: bold;
}
/* End Custom Marquee */
body, ul, li {
font-size:14px;
font-family: Cambria, Georgia, serif;
line-height:21px;
text-align:left;
}
/* Navigation Menu */
#menu {
list-style:none;
width:1018px;
height:40px;
padding:0px 20px 0px 20px;
/* Rounded Corners */
/* #^#^#^#^#^#^#^#^# Corners Not Rounded #^#^#^#^#^#^#^#^# */
/*
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; */
/*Background color and gradients */
background: #FFFFFF;
/* Background for IE */
background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#FFFFFF));
/*Borders */
border: 1px solid #003D79;
-moz-box-shadow:inset 0px 0px 1px #003D79;
-webkit-box-shadow:inset 0px 0px 1px #003D79;
box-shadow:inset 0px 0px 1px #003D79;
}
#menu li {
float:left;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:27px;
margin-top:7px;
border:none;
}
#menu li:hover {
border: 1px solid #FFFFFF;
/* Border Around TAB */
padding: 4px 9px 4px 9px;
/* Background color and gradients for TABS */
background: #FFFFFF;
background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#FFFFFF));
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family: Cambria, Georgia, serif;
font-size:15px;
font-weight:bold;
color: #003D79;
/* COLOR of MENU BAR TEXT*/
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #FFFFFF;
/* Shadow Under TAB TEXT */
}
#menu li:hover a {
color:#029feb;
/* CHANGE COLOR OF TEXT */
font-weight:bold;
text-shadow: 1px 1px 1px #FFFFFF;
/* TEXT SHADOW */
}
#menu li .drop {
padding-right:21px;
background:url("img/drop.png") no-repeat rightright 8px;
}
#menu li:hover .drop {
background:url("img/drop.png") no-repeat rightright 7px;
}
/* Drop Down */
.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns {
margin:4px auto;
float:left;
position:absolute;
left:-999em;
/* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #FFFFFF;
border-top:none;
/* Gradient background */
/* ON HOVER BG */
background:#FFFFFF;
background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#FFFFFF));
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
.dropdown_1column {
width: 140px;
}
.dropdown_2columns {
width: 280px;
}
.dropdown_3columns {
width: 420px;
}
.dropdown_4columns {
width: 560px;
}
.dropdown_5columns {
}
#menu li:hover .dropdown_1column, #menu li:hover .dropdown_2columns, #menu li:hover .dropdown_3columns, #menu li:hover .dropdown_4columns, #menu li:hover .dropdown_5columns {
left:-1px;
top:auto;
}
/* Columns */
.col_1, .col_2, .col_3, .col_4, .col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {
width:130px;
}
.col_2 {
width:270px;
}
.col_3 {
width:410px;
}
.col_4 {
width:550px;
}
.col_5 {
width:690px;
}
/* Right alignment */
#menu .menu_right {
float:rightright;
margin-right:0px;
}
#menu li .align_right {
/* Rounded Corners */
-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
left:auto;
rightright:-1px;
top:auto;
}
/* Drop Down Content Stylings */
#menu p, #menu h2, #menu h3, #menu ul li {
font-family: Cambria, Georgia, serif;
line-height:21px;
font-size:14px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}
/* ############### Colors For Unordered List text ##################### */
#menu li:hover div a {
font-size:14px;
color:#003D79;
}
#menu li:hover div a:hover {
color:#029feb;
}
/* ######################################################## */
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
.imgshadow {
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
.img_left {
/* Image sticks to the left */
width:auto;
float:left;
margin:5px 15px 5px 5px;
}
#menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* Shadow */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}

Java 脚本

function FP_swapImg() { //v1.0
var doc = document,
args = arguments,
elm, n;
doc.$imgSwaps = new Array();
for (n = 2; n < args.length;
n += 2) {
elm = FP_getObjectByID(args[n]);
if (elm) {
doc.$imgSwaps[doc.$imgSwaps.length] = elm;
elm.$src = elm.src;
elm.src = args[n + 1];
}
}
}

function FP_preloadImgs() { //v1.0
var d = document,
a = arguments;
if (!d.FP_imgs) d.FP_imgs = new Array();
for (var i = 0; i < a.length; i++) {
d.FP_imgs[i] = new Image;
d.FP_imgs[i].src = a[i];
}
}

function FP_getObjectByID(id, o) { //v1.0
var c, el, els, f, m, n;
if (!o) o = document;
if (o.getElementById) el = o.getElementById(id);
else if (o.layers) c = o.layers;
else if (o.all) el = o.all[id];
if (el) return el;
if (o.id == id || o.name == id) return o;
if (o.childNodes) c = o.childNodes;
if (c) for (n = 0; n < c.length; n++) {
el = FP_getObjectByID(id, c[n]);
if (el) return el;
}
f = o.forms;
if (f) for (n = 0; n < f.length; n++) {
els = f[n].elements;
for (m = 0; m < els.length; m++) {
el = FP_getObjectByID(id, els[n]);
if (el) return el;
 }
}
return null;
}

// -->

谢谢你来自 , Web 管理员@lhslobos.org

最佳答案

您正在解决几个问题。我会对此进行很多更改，但特别是不要使用

它永远不会像您期望的那样:http://www.w3.org/wiki/HTML/Elements/marquee
这将是首选:http://www.w3schools.com/cssref/#marquee
尝试使用 HTML5 文档类型并跳过冗长的 HTML4 声明。无论如何，HTML5 更易于编码。

关于javascript - Marquee 在 IE 中拖动我的 css <ul> 内容在 chrome 中完美工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19820934/

javascript - Marquee 在 IE 中拖动我的 css <ul> 内容在 chrome 中完美工作

上一篇：html - 如何在导航子菜单中创建三列

下一篇：html - 防止在 Zurb Foundation 中调整网格大小