1
我遇到了一些图像无法正常显示的问题。我在过去的一个小时里搜索了互联网，并尝试了各种不同的想法，但我很难过。在这个网页上，我有一些文字“Vitant”的图片，当我离线工作时，它在所有浏览器中都显示得很好。DIV背景图像不会在Firefox或Chrome中显示（但仅限在线）。它在网上适用于IE？
当我将该网站上传到我的虚拟主机后，无论出于何种原因，这一个背景图片停止显示在Firefox和Chrome中。但是，它在IE中显示得很好。它在Firefox和Chrome的移动版本中也显示得很好。
我将此图像用作div（＃vitant-text）的背景图像。
网页：http://www.joshhemmyonline.com/vitant_test
链接到图片：http://www.joshhemmyonline.com/vitant_test/_images/vitant_ad_banner_text.png
*注：有问题的图像应显示右侧的文本上述“2步处理改善睡眠&更节能”
相关的ID是＃vitant-text
源HTML：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Vitant: The 2-Step SLEEP/ENERGY Solution. Inquire about a sample today!</title>
<link href="_css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div id="header-container">
<a href="#" id="logo" name="top">Vitant Sleep & Wakefulness Aid</a>
<div id="main-banner"></div>
<div id="sample-div">
<h1>Try a Sample</h1>
<p>* No Cancellation Required<br />
* No Obligation</p>
<form action="" method="post">
<input name="" type="text" id="name_text_field" Value="Name..." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<input name="" type="text" id="email_text_field" Value="Email..." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<input name="" type="image" src="_images/tryitout_button_BLANK.png" id="submit-button-form">
</form>
</div>
<div id="vitant-box"></div>
</div>
</header>
<section>
<div id="content_container">
<div id="vitant-text"></div>
<h1 id="contentHeadingText">The 2 Step Treatment for <span>Better Sleep</span> & <span>More Energy</span></h1>
<div id="work-div">
<h1>How Does it Work?</h1>
</div>
<div id="nightly-supplement-div">
<h1>Nightly Supplement Ingredients</h1>
<p class="instructions">*Take one tablet before going to bed to promote relaxtion
and drowsiness to aid in falling (and staying) asleep.</p>
<p class="ingredient-text">
<span>Melatonin</span> is a hormone that is naturally produced in the brain.
Studies have shown that melatonin plays a role in sleep and
wake cycles. Insufficient levels of melatonin in one’s body is a
common cause of certain sleep disorders. The use of melatonin
supplements can help improve and regulate the normal
sleep cycle.</p>
<p class="ingredient-text">
<span>L-Theanine</span> is an amino acid that has been shown to both
calm the brain and to enhance concetration. This amino acid
comes from tea leaves. Tea has been used for centuries for its
calming and relaxing symptoms provided to its drinkers.
Studies suggest that L-Theanine is largely responsible for this.</p>
<p class="ingredient-text">
<span>GABA</span> (better known as γ-Aminobutyric acid) is an amino acid
that has been shown to regulate & relax the body’s neurological
system. It has also been shown to have a significant role in
regulating and sustaining muscle tone within the human body.</p>
<p class="ingredient-text">
<span>5-HTP</span> is an amino acid (5-Hydroxytryptophan). The body
produces 5-HTP from Tryptophan, another amino acid, and
converts it to serotonin, an important chemical for regulating
the brain and for mood-enchancements. Serotonin is also
responsible for hunger and sleep.</p>
<p class="ingredient-text">
<span>Lemon Balm</span> is a perennial herb from the mint family. The
leaves have been used to treat many afflictions from stomach
disorders to Alzheimer’s disease. Leomon balm contains chemicals
that have a sedative and calming effect.</p>
<p class="ingredient-text">
<span>Passion Flower</span> is a medicinal herb that has long been used
as a sedative.</p>
<p class="ingredient-text">
<span>Chamomilla Recutita</span> is a daisy-like plant that bas been
used throughout the centuries for its medicinal uses. Along
with being used to treat stomach ailments and as an
anti-inflammatory, the plant has also traditionally been used as
a sleep aid for its relaxing properties.</p>
<p class="ingredient-text">
<span>Valerian</span> has been used for thousands of years throughout
Europe and Asia as a sedative. Studies suggest that valerian is
effective at helping people with insomnia. It can help provide
a better-quality sleep and can help to fall asleep quicker.</p>
</div>
<div id="vertical-divider"></div>
<div id="daily-supplement-div">
<h1>Daily Supplement Ingredients</h1>
<p class="instructions">*Take one tablet first thing in the morning to provide your
body with effective energy to wake you up fast!</p>
<p class="ingredient-text">
<span>Caffeine</span> is the world’s most effective & powerful over-the-counter
mental altertness and energy aid.</p>
<p class="ingredient-text">
<span>Green Tea Extract</span> is a rising start in for its numerous health
benefits. Green Tea is effective for providing energy and according
to the University of Maryland Medical Center, it may boost the
metabolism and help burn fat.</p>
<p class="ingredient-text">
<span>Essential Vitamins</span> are important for every day good health,
well-being, and energy. We’ve packed plenty of Vitamin B3, B6, B9,
B2, and B12 into this supplement for that extra kick in the morning.</p>
<p class="ingredient-text">
<span>Ginko Biloba</span> is derived from a tree which has been used medic-
inally for thousands of years. Evidence seems to suggest that it is
useful for memory enhancement and mental clarity.</p>
<p class="ingredient-text">
<span>Ginseng</span> is an herb that is known to increase energy, have certain
anti-fatigue components, relieves stress, and increase memory.</p>
<p class="ingredient-text">
<span>Dimethylaminoethanol (DMAE)</span> is an organic compound.
Short-term studies have shown this compound to provide an
increase in alertness with a positive influence on mood.</p>
<p class="ingredient-text">
<span>Taurine</span> is an amino acid that helps regulate heartbeat, muscle
contractions, and energy levels.</p>
<p class="ingredient-text">
<span>Guarana</span> comes from plants in South America. It has long been
used to increase energy and mental alertness. Guarana contains
caffeine, theobromine, and theophylline, which are all known
stimulants.</p>
<p class="ingredient-text">
<span>Antioxidants</span> come in various forms, which have been added
to our daily supplement. Vitamins A, C, and E all have antioxidant
properties. Antioxidants have a power effect on your health and
energy levels.</p>
<p class="ingredient-text">
<span>Glucuronolactone (DGL)</span> is believed to aide in detoxification,
freeing hormones and other chemicals, and the biosynthesis of
vitamin C. It is used to help with glycogen depletion by preventing
other substances from depleting glycogen supplies in the muscles.</p>
<p class="ingredient-text">
<span>Yerba Mate</span> is derived from the leaves of a shrub. This herb is
an all-natural source of caffeine. A form that many believe does
not produce any negative side effects.</p>
<p class="ingredient-text">
<span>L-theanine</span> is an amino acid, derived from tea leaves, that
has been shown to calm the brain while also enhancing con-
centration.</p>
</div>
<div id="creator-message-div">
<h1>Message from the creator:</h1>
<p class="create-message">“Waking up in the morning has long been a difficult task for me. Even after my alarm clock rings I still am in the ‘wake-up’ phase for a good
20-30 minutes, only actually waking up once I get done drinking my morning cup of coffee. I knew I needed something to help me get
going faster in the morning and I also knew I needed to improve my poor sleeping habits, which were taking valuable energy from
my morning routine. Thus, I created two supplements as part of a daily 2-step regimen. This regimen is safe for everyday use and the
two supplements work together to help provide me a better night’s sleep and to get the energy that I require in the morning.”<br />
<span>-Josh Hemmy (Vitant Creator)</span></p>
</div>
</div>
</section>
<footer>
<div id="footer-container">
<p class="footer-tagline1">Start your journey to the <span>best sleep</span></p>
<p class="footer-tagline2">and <span>most energy</span> that you have ever experienced!</p>
<p class="obligationtext">There is No Obligation & Nothing To Cancel</p>
<a href="#top" class="footerbutton">Try It Out</a>
<div id="vitant-footer-logo"></div>
</div>
</footer>
</body>
</html>
来源CSS：
@charset "utf-8";
/* CSS Document */
/********** CSS RESET **********/
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;
}
/********** MAIN BODY STYLES **********/
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 62.5%;
background: #fff;
}
/********** HEADER STYLES **********/
header {
display: block;
height: 467px;
background: url(../_images/header_main_bg.png) repeat-x 0 0;
}
#header-container {
display: block;
width: 1000px;
margin: 0 auto;
height: 467px;
position: relative;
}
#logo {
float: left;
display: block;
width: 244px;
height: 115px;
background: url(../_images/logo.png) no-repeat 0 0;
text-indent: -9999px;
margin: 36px 0 0 47px;
}
#main-banner {
width: 1000px;
height: 304px;
position: relative;
top: 163px;
background: url(../_images/main_banner.png) no-repeat 0 0;
}
#sample-div {
position: relative;
top: -241px;
left: 604px;
display: block;
width: 291px;
height: 306px;
background: url(../_images/sample_form_bg.png) repeat-x 0 0;
border: 2px solid #b3b3b3;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#vitant-box {
display: block;
width: 321px;
height: 183px;
background: url(../_images/vitant_box.png) no-repeat 0 0;
position: absolute;
top: 349px;
left: 73px;
}
#sample-div h1 {
text-align: center;
font-size: 24px;
font-weight: bold;
color: #2a3333;
margin-top: 21px;
}
#sample-div p {
color: #2a3333;
font-size: 11px;
margin: 15px 0 0 30px;
}
#name_text_field {
margin: 18px 0 0 26px;
padding-left: 30px;
padding-right: 5px;
width: 205px;
height: 32px;
background: url(../_images/name_textfield.png) no-repeat 0 0;
border: none;
color: #2a3333;
font-size: 20px;
}
#email_text_field {
margin: 18px 0 0 26px;
padding-left: 30px;
padding-right: 5px;
width: 205px;
height: 32px;
background: url(../_images/email_textfield.png) no-repeat 0 0;
border: none;
color: #2a3333;
font-size: 20px;
}
#submit-button-form {
display: block;
width: 232px;
height: 55px;
background: url(../_images/tryitout_button.png) no-repeat 0 0;
margin: 29px 0 0 30px;
}
#submit-button-form:hover {
background-position: 0 -55px;
}
/********** CONTENT STYLES **********/
section {
display: block;
width: 100%;
min-height: 658px;
background: #f2f2f2 url(../_images/content_main_bg.png) repeat-x 0 0;
}
#content_container {
margin: 0 auto;
display: block;
width: 1000px;
min-height: 658px;
overflow: hidden;
}
#vitant-text {
float: left;
width: 1000px;
height: 65px;
background: url(../_images/vitant_ad_banner_text.png) no-repeat 0 0;
margin-top: 65px;
}
h1#contentHeadingText {
font-family: Verdana, Geneva, sans-serif;
font-size: 28px;
text-align: center;
color: #2a3333;
}
h1#contentHeadingText span {
color: #9e3b02;
font-weight: bold;
font-style: italic;
}
#work-div {
width: 368px;
height: 50px;
background: #333b3a;
margin: 30px auto;
}
#work-div h1 {
color: #fff;
font-size: 30px;
font-weight: bold;
line-height: 50px;
text-align: center;
}
#nightly-supplement-div {
float: left;
width: 478px;
min-height: 1100px;
padding-right: 20px;
font-size: 14px;
margin-top: 30px;
}
#vertical-divider {
float: left;
width: 4px;
height: 1028px;
background: url(../_images/vertical_divider.png) no-repeat 0 0;
margin-top: 80px;
}
#daily-supplement-div {
float: left;
width: 478px;
min-height: 1100px;
padding-left: 20px;
margin-top: 30px;
}
#nightly-supplement-div h1, #daily-supplement-div h1 {
font-size: 24px;
color: #333b3a;
}
#nightly-supplement-div p.instructions, #daily-supplement-div p.instructions {
color: #9e3b02;
font-size: 14px;
font-style: italic;
line-height: 18px;
margin-top: 5px;
}
#nightly-supplement-div p.ingredient-text, #daily-supplement-div p.ingredient-text {
color: #525555;
font-size: 14px;
font-style: italic;
line-height: 18px;
margin-top: 36px;
}
#nightly-supplement-div p.ingredient-text span, #daily-supplement-div p.ingredient-text span {
color: #2a3333;
font-size: 18px;
}
#creator-message-div {
float: left;
clear: both;
margin-top: 100px;
}
#creator-message-div h1 {
font-size: 18px;
color: #2a3333;
}
#creator-message-div p.create-message {
margin-top: 22px;
margin-bottom: 42px;
color: #525555;
line-height: 20px;
font-style: italic;
font-size: 14px;
text-indent: 30px;
}
#creator-message-div p.create-message span {
font-weight: bold;
}
/********** FOOTER STYLES *********/
footer {
background: #fff;
border-top: 1px solid #cacaca;
overflow: hidden;
}
#footer-container {
margin: 0 auto;
width: 1000px;
min-height: 141px;
color: #2a3333;
font-family: Verdana, Geneva, sans-serif;
}
.footer-tagline1 {
float: left;
font-size: 18px;
color: #2a3333;
margin-top: 35px;
margin-left: 40px;
}
.footer-tagline1 span {
font-weight: bold;
font-style: italic;
}
.footer-tagline2 {
float: left;
font-size: 18px;
margin: 6px 0 0 206px;
}
.footer-tagline2 span {
font-weight: bold;
font-style: italic;
}
p.obligationtext {
float: right;
font-size: 14px;
margin-top: -40px;
}
a.footerbutton {
float: right;
margin: -20px 30px 0 0;
display: block;
width: 232px;
height: 55px;
background: url(../_images/tryitout_button.png) no-repeat 0 0;
text-indent: -9999px;
}
a.footerbutton:hover {
background-position: 0 -55px;
}
#vitant-footer-logo {
width: 85px;
height: 43px;
float: left;
background: url(../_images/footer_logo.png) no-repeat 0 0;
}
如果任何人有任何意见或建议，我将非常感激！
似乎在Chrome中工作正常。你有本地的缓存问题吗？ – sphair 2013-04-05 08:14:39
它在Firefox和Chrome浏览器中都很好显示 – 2013-04-05 08:16:01