当我在 safari 中打开它时，一切似乎都可以正常工作，但是当我在 chrome 或 ie 或 firefox 中打开它时，图像显示缺少图像图标，并且我的 css 颜色和一些样式丢失。它也可以在 safari 上完美运行，但它在 ie 和 chrome 上的工作方式相同，但在 Firefox 上它完全不理解代码。这是我的网站
如果你需要我的实际代码
HTML 代码
<!DOCTYPE html>
<html>
<head>
<script src="http://static.dudamobile.com/DM_redirect.js" type="text/javascript"></script>
<script type="text/javascript">DM_redirect("http://mobile.dudamobile.com/site/obhsmsa_host56");</script>
<link rel="icon" type="image/x-icon" href="favicon-1.ico" />
<title>Home</title>
<meta charset="utf-8">
<link rel="stylesheet" href="reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<link rel="stylesheet" href="grid.css" type="text/css" media="screen">
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="cufon-replace.js" type="text/javascript"></script>
<script src="Glegoo_400.font.js" type="text/javascript"></script>
<script src="FF-cash.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body id="page1">
<!--==============================header=================================-->
<header>
<div class="main">
<div class="wrapper">
<h1><a href="index.html">OBHS MSA</a></h1>
<nav class="fright">
<ul class="menu">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="Disscussions.html">Discussion Question/Topics </a></li>
<li><a href="getinvolved.html">Get Involved</a></li>
<li><a href="Debates.html">Debates</a></li>
<li><a href="leaders.html">Leaders </a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contacts.html">Contacts</a></li>
</ul>
</nav>
</div><br>
</div>
<div class="row-bot">
<div class="main">
<figure class="img-indent-r"><img src="/page1-img1.png" alt="" /></figure>
<div class="extra-wrap indent">
<strong class="title-1">Welcome to Old Bridge High School MSA</strong>
<p> <p>Old Bridge High School MSA is one of the many MSA programs worldwide. MSA history "Established in January 1963, the Muslim Students Association of the U.S. & Canada (MSA National) continues to serve Muslim students during their college and university careers by facilitating their efforts to establish, maintain and develop local MSA chapters.
First established on the campus of the University of Illinois at Urbana-Champaign by a conference of Muslim students from around the U.S. and Canada, MSA National has been a uniting forum for Muslim students from diverse backgrounds for over four decades. It continues its mission of meeting the needs of our Muslim youth on campus with the zeal and energy of the Muslim students, but requires the support of the larger community." (MSA NATIONAL)</p>
<br></div>
<div class="clear"></div>
</div>
</div>
</header>
<!--==============================content================================-->
<section id="content"><div class="ic"></div>
<div class="main">
<div class="container_12">
<div class="wrapper p3">
<article class="grid_4">
<div class="banner">
<figure><img src="/banner-1.png" alt="" /></figure><br>
<a class="button" href="http://msanational.org">more</a>
</div>
</article>
<article class="grid_4">
<div class="banner">
<figure><img src="/banner-2.png" alt="" /></figure><br>
<a class="button" href="http://icnany.org/site2/">more</a>
</div>
</article>
<article class="grid_4">
<div class="banner">
<figure><img src="/banner-3.png" alt="" /></figure><br>
<a class="button" href="#">more</a>
</div>
</article>
</div>
<div class="wrapper">
<article class="grid_8">
<h2>Upcoming Meetings</h2>
<div class="wrapper border-bot p3">
<time class="tdate-1" datetime="2012-10-21">
<span>Friday</span>
<strong>4</strong>
</time>
<div class="extra-wrap">
<p class="prev-indent-bot"><span class="color-1"></span></p>
<p>We will be staying till 4:00 inshAllah, after prayer we will be having a dissussion, or a possible special guest.</p>
</div>
</div>
<div class="wrapper">
<time class="tdate-1" datetime="2012-10-21">
<span>Friday</span>
<strong>11</strong>
</time>
<div class="extra-wrap">
<span class="color-1"></span><p>We will be staying till 3:15.</p>
</div>
</div>
</article>
<article class="grid_4">
<div class="indent-top">
<div class="indent-left p3">
</div>
<div class="box">
<div class="padding">
<strong class="text-1">General Meetings</strong>
<figure class="p2"></figure>
<h6><strong>Friday 2:30 - 3:15</strong></h6>
We have a khutbah than we have Friday prayer. Bus passes are provided. All are welcome.
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
<!--==============================footer=================================-->
<footer>
<div class="main">
<div class="container_12">
<div class="wrapper">
<div class="grid_8">
<div class="aligncenter">
<br> <br>OBHS MSA, ALL RIGHTS RESERVED © 2013
</div>
</div>
<div class="grid_3 prefix_1">
<ul class="list-services">
<li><a href="https://www.facebook.com/groups/145504852207555/"></a></li>
<li class="item-1"><a href="https://www.twitter.com/obhs_msa"></a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>
我的CSS是
> /* Getting the new tags to behave */ article, aside, audio, canvas,
> command, datalist, details, embed, figcaption, figure, footer, header,
> hgroup, keygen, meter, nav, output, progress, section, source, video
> {display:block;} mark, rp, rt, ruby, summary, time {display:inline;}
>
> /* Global properties
> ======================================================== */ html {width:100%; height:100%;}
>
> body {font-family:Arial, Helvetica,
> sans-serif;font-size:14px;line-height:25px;color:#7f7f7f;min-width:1000px;height:100%;background:url(/body-tail.gif)
> center top repeat #0e0f0f;} .ic
> {border:0;float:right;background:#990099;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220%
> 0 0 0;overflow:hidden;padding:0} .bg {width:100%;
> background:url(/content-tail.gif) center 0 no-repeat;}
>
> .main { width:1000px; margin:0 auto; }
>
> a {color:#cc2800; outline:none;} a:hover {text-decoration:none;}
>
> .col-1, .col-2 {float:left;}
>
> .wrapper {width:100%; overflow:hidden;} .extra-wrap {overflow:hidden;}
> p {margin-bottom:22px;} .p1 {margin-bottom:8px;} .p2
> {margin-bottom:15px;} .p3 {margin-bottom:30px;} .p4
> {margin-bottom:40px;} .p5 {margin-bottom:50px;}
>
> .reg {text-transform:uppercase;}
>
> .fleft {float:left;} .fright {float:right;}
>
> .alignright {text-align:right;} .aligncenter {text-align:center;}
>
> .it {font-style:italic;}
>
> .color-1 {color:#fff;} .color-2 {color:#000;} .color-3 {color:#666;}
>
> /*********************************boxes**********************************/ .indent {padding:46px 0 0 30px;} .indent-top {padding-top:10px;}
> .indent-left {padding-left:20px;} .indent-right {padding-right:20px;}
>
> .indent-bot {margin-bottom:20px;} .indent-bot2 {margin-bottom:18px;}
> .indent-bot3 {margin-bottom:45px;}
>
> .prev-indent-bot {margin-bottom:10px;} .prev-indent-bot2
> {margin-bottom:5px;} .img-indent-bot {margin-bottom:25px;} .margin-bot
> {margin-bottom:35px;}
>
> .img-indent {float:left; margin:0 20px 0px 0;} .img-indent2
> {float:left; margin:0 13px 0px 0;} .img-indent3 {float:left;
> margin:11px 20px 0px 0;} .img-indent-r {float:right; margin:-43px 0px
> 0px 30px;}
>
> .buttons a:hover {cursor:pointer;}
>
> .menu li a, .list-1 a, .list-2 a, .link, .button, .button2, h1 a
> {text-decoration:none;}
>
> /*********************************header*************************************/ header { width:100%; background:#000; position:relative;
> z-index:2; }
>
> h1 { padding:25px 0 24px 1px; float:left; } h1 a {
> display:block; width:458px; height:94px; text-indent:-9999em;
> background:url(/logo.png) 0 0 no-repeat; } /***** menu *****/
> .menu { padding:66px 29px 0 0; } .menu li { float:left;
> position:relative; padding-left:28px; } .menu li a {
> display:inline-block; font-size:14px; line-height:17px;
> color:#7f7f7f; } .menu li a.active, .menu > li > a:hover
> {color:#cc2700;}
>
> .row-bot { width:100%; padding: 0 0;
> background:url(row-bot-tail.gif) center top repeat-x; } .title-1 {
> display:block; font-size:29px; line-height:2em; color:#fff;
> letter-spacing:-2px; margin-bottom:5px; }
>
> /*********************************content*************************************/
> #content { width:100%; padding:40px 0 60px; background:url(content-tail.gif) center top repeat;
> position:relative; z-index:1; }
>
> .spacer-1 { width:100%; background:url(pic-1.gif) 217px 0 repeat-y;
> }
>
> .box { width:100%; background:url(box-tail.gif) 0 0 repeat;
> border-radius:5px; -moz-border-radius:5px;
> -webkit-border-radius:5px; } .box .padding {padding:5px 20px 15px;}
>
> h2 { font-size:35px; line-height:2em; color:#fff;
> letter-spacing:-3px; } h3 { font-size:24px; line-height:2em;
> color:#fff; background:url(h3-tail.gif) 0 0 repeat;
> border-radius:5px; -moz-border-radius:5px;
> -webkit-border-radius:5px; padding-left:21px; letter-spacing:-2px;
> } h6 {color:#fff; font-weight:normal;}
>
> .border-bot { width:100%; padding-bottom:32px;
> background:url(pic-1.gif) 0 bottom repeat-x; }
>
> .banner { width:100%; position:relative; } .banner a {
> position:absolute; left:20px; bottom:30px; }
>
> .button { display:inline-block; padding:1px 20px 8px;
> font-size:18px; line-height:22px; color:#556502;
> background:url(button-tail.gif) 0 0 repeat-x #cdcdcd; border:3px
> solid #fff; cursor:pointer; border-radius:9px;
> -moz-border-radius:9px; -webkit-border-radius:9px;
> letter-spacing:-1px; } .button:hover {color:#ce0b0e;}
>
> .button2 { display:inline-block; padding:5px 25px 9px;
> font-size:22px; line-height:27px; color:#fff;
> background:url(button2-tail.gif) 0 0 repeat-x #cc2800;
> cursor:pointer; border-radius:6px; -moz-border-radius:6px;
> -webkit-border-radius:6px; letter-spacing:-1px; } .button2:hover
> {background:#cc2800;}
>
> .list-1 li { font-size:14px; line-height:19px; font-style:italic;
> padding:8px 0; background:url(pic-1.gif) 0 bottom repeat-x; }
> .list-1 a {color:#fff;} .list-1 a:hover {color:#cc2800;} .list-1
> .last-item {background:none;}
>
> .list-2 li { font-size:14px; line-height:19px; font-style:italic;
> padding:8px 0; background:url(pic-1.gif) 0 bottom repeat-x; }
> .list-2 a { display:inline-block; color:#fff;
> padding-left:11px; background:url(marker-1.gif) 0 8px no-repeat;
> } .list-2 a:hover {color:#cc2800;} .list-2 .last-item
> {background:none;}
>
> .link:hover {text-decoration:underline;}
>
> .link-1 { display:inline-block; font-size:14px;
> padding-right:8px; background:url(marker-3.gif) right 8px
> no-repeat; } .link-1:hover {color:#fff;}
>
> .text-1 { display:block; font-size:19px; line-height:45px;
> color:#fff; letter-spacing:-2px; margin-bottom:5px; }
>
> dl span {float:left; width:82px; color:#fff;}
>
> dl.years {line-height:35px;} dl.years dt {float:left; width:49px;
> color:#fff; background:url(pic-1.gif) left bottom repeat-x;} dl.years
> dd {overflow:hidden; background:url(pic-1.gif) left bottom repeat-x;}
> dl.years .last-item {background:none;}
>
> .tdate-1 { display:block; width:60px; height:60px;
> overflow:hidden; text-align:center; background:url(time-bg.png) 0 0
> no-repeat; float:left; margin:0px 21px 0 0; } .tdate-1 span {
> display:block; font-size:9px; line-height:1.2em; color:#fff;
> } .tdate-1 strong { display:block; font-size:37px;
> line-height:46px; color:#000; } /* -- gallery begin --*/
> div.content img { position: relative; z-index: 2;}
> div.slideshow-container { height: 378px; width:600px;
> margin-bottom:40px; position:relative; z-index:1; } div.slideshow
> span.image-wrapper { display: block; width: 600px; height: 378px;
> position:absolute; left:0; top:0; margin:0; } div.slideshow
> a.advance-link { display: block; margin: 0; font-size:0;
> line-height:0; text-decoration:none; } div.slideshow
> a.advance-link:hover, div.slideshow a.advance-link:active,
> div.slideshow a.advance-link:visited { text-decoration: none; }
> div#thumbs { padding: 0; width:600px; } ul.thumbs { padding: 0 0 0
> 0; width:100%; overflow:hidden; position:relative; } ul.thumbs li {
> float:left; margin-right:30px; margin-bottom:30px; width:180px;
> height:124px; } ul.thumbs li.last {margin-right:0;} ul.thumbs
> li.last2 {margin-bottom:0;} ul.thumbs li.last3 {margin:0;}
>
> a.thumb {display:block;} a.thumb:focus {outline: none;}
>
> /* -- gallery end --*/
>
> /***** contact form *****/
> #contact-form {width:600px;}
> #contact-form label {display:block; height:35px;}
> #contact-form label.message {height:324px;}
> #contact-form input {width:260px; font-size:14px; line-height:17px; color:#7f7f7f; padding:8px 20px 7px; margin:0; font-family:Arial,
> Helvetica, sans-serif; border:none; background:#fff;
> border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;}
> #contact-form textarea {height:314px; min-height:314px; max-height:314px; overflow:auto; width:560px; max-width:560px;
> min-width:560px; font-size:14px; line-height:17px; color:#7f7f7f;
> padding:5px 20px; margin:0; font-family:Arial, Helvetica, sans-serif;
> border:none; background:#fff; border-radius:6px;
> -moz-border-radius:6px; -webkit-border-radius:6px;}
>
> .buttons {padding-top:20px;} .buttons a {margin-right:10px;}
> /****************************footer************************/ footer {
> width:100%; padding:30px 0 45px; } footer span {display:block;}
>
> .list-services {padding:19px 0 0 2px;} .list-services li {
> float:left; padding:0 9px 0 0; } .list-services a {
> display:block; width:27px; height:27px; text-indent:-9999em;
> background:url(social-icons.png) 0 0 no-repeat; } .list-services
> .item-1 a {background-position:-36px 0;} .list-services .item-2 a
> {background-position:-72px 0;} .list-services .item-3 a
> {background-position:-108px 0;}