当我在safari中打开它时，每件事似乎工作正常但是当我用chrome或ie或firefox打开它时，图像显示缺少图像图标，我的CSS颜色和一些样式丢失。它也适用于safari，但它在ie和chrome上工作相同但在firefox上它完全不理解代码。这是我的Website
如果你需要我的实际代码
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;}
答案 0 :(得分：0)
您的img代码如下：
<img src="/banner-2.png" alt="">
取消src
<img src="banner-2.png" alt="">
如果图像在文件夹内，请添加：
<img src="images/banner-2.png" alt="">
答案 1 :(得分：0)
告诉我OP您将这些图片保存在哪种格式？尝试以24位PNG格式保存这些图像，并在没有颜色配置文件的情况下保存它们。用24位的图像重新放置当前不工作的图像，看看是否有效。