2015-11-16 81 views
-1

我在学习CSS,这是我迄今为止编写的代码。我使用标签更改段落的背景颜色,出于某种原因,当我进入Firefox的网页时段落的背景不会改变。奇怪的是,当我将它粘贴到“snippet”中时,它在StackOverFlow上运行良好。更改div标签中的背景颜色不起作用?

<!DOCTYPE HTML> 
 
<html> 
 
    <style> 
 
\t  * { 
 
\t \t font-family: georgia; 
 
\t  line-height: 1.3em; 
 
\t \t background-color: #F3F4E4; 
 
\t \t color: black; 
 
\t \t } 
 

 
\t \t p { 
 
\t \t font-size: 17px; 
 
      font-style: italic; 
 

 
\t \t } 
 
\t \t #img1 { 
 
\t \t width: 750px; 
 
\t \t  
 
\t \t } 
 
\t \t 
 
\t \t #img2 { 
 
\t \t width: 600px; 
 
\t \t } 
 
\t \t 
 
\t \t #list { 
 
\t \t font-size: 25px; 
 
\t \t } 
 
\t \t #list-item, #lala { 
 
      font-family: SignPainter; 
 
\t \t font-size: 22px; \t \t 
 
\t \t } 
 
\t \t h2 { 
 
\t \t font-family: SignPainter; 
 
      font-size: 40px; 
 
\t \t } 
 
\t \t #critics { 
 
\t \t width: 80%; 
 
\t \t background-color: red; 
 
\t \t } 
 

 

 
\t </style> 
 
    <head> 
 
     <title>B to the F</title> 
 
     <p id="list">List</p> 
 
\t <ul id="list-item"> 
 
\t  <li><a href="#about">About</a></li> 
 
\t \t <li><a href="#review">Critics</a></li> 
 
\t </ul> 
 
    </head> 
 
     <body> 
 
     <center><h2>Back to the Future</h2></center> 
 
\t  <center><img src="http://images5.fanpop.com/image/photos/26500000/Back-To-The-Future-Trilogy-back-to-the-future-26581615-1014-574.jpg" alt="Back to the Future Trilogy" id="img1"></center> 
 
\t \t <h3 id="about">About (Taken from Wikipedia Page)</h3> 
 
\t \t <center><img src="http://apartment3k.com/wp-content/uploads/2015/10/doc-marty.jpg" alt="Doc and Marty" id="img2"></center> 
 
\t <div id="critics"> 
 
     <p> 
 
\t \t The <span id="lala">Back to the Future</span> franchise is an American science fiction-adventure film series written and directed by Robert Zemeckis, produced by Bob Gale and Neil Canton for Steven Spielberg's Amblin Entertainment, and distributed by Universal Pictures. The franchise follows the adventures of a high school student, Marty McFly (Michael J. Fox), and an eccentric scientist, Dr. Emmett L. Brown (Christopher Lloyd), as they use a DeLorean time machine to time travel to different periods in the history of Hill Valley, California.<br> 
 
     The first film was the highest-grossing film of 1985 and became an international phenomenon, leading to the second and third films, which were back-to-back film productions, released in 1989 and 1990, respectively. Though the sequels did not perform quite as well at the box office as the first film, the trilogy remains immensely popular after a quarter-century and has yielded such spinoffs as an animated television series and a motion-simulation ride at the Universal Studios Theme Parks in Universal City, California; Orlando, Florida (now closed); and Osaka, Japan, as well as a Microsoft Windows, Macintosh, iPad, PS3, and Wii video game. The film's visual effects were done by Industrial Light and Magic. The trilogy was nominated for five Academy Awards all together, winning one (Best Sound Editing). 
 
\t \t </p> 
 
\t </div> 
 
\t \t <h3 id="review">Is it any good?</h3> 
 

 
\t \t <h4>Part I</h4> 
 

 
\t \t <a href="http://www.rogerebert.com/reviews/back-to-the-future-1985">Roger Ebert</a><br> 
 
\t \t <a href="http://www.imdb.com/title/tt0088763/">IMDb</a><br> 
 
\t \t <a href="http://www.rottentomatoes.com/m/back_to_the_future">Rotten Tomatoes</a><br> 
 

 
\t \t <h4>Part II</h4> 
 

 
\t \t <a href="http://www.rogerebert.com/reviews/back-to-the-future-part-ii-1989">Roger Ebert</a><br> 
 
\t \t <a href="http://www.imdb.com/title/tt0096874/">IMDb</a><br> 
 
\t \t <a href="http://www.rottentomatoes.com/m/back_to_the_future_2/">Rotten Tomatoes</a><br> 
 

 

 
\t \t <h4>Part III</h4> 
 

 
\t \t <a href="http://www.rogerebert.com/reviews/back-to-the-future-part-iii-1990">Roger Ebert</a><br> 
 
\t \t <a href="http://www.imdb.com/title/tt0099088">IMDb</a><br> 
 
\t \t <a href="http://www.rottentomatoes.com/m/back_to_the_future_3/">Rotten Tomatoes</a><br> 
 

 
    </body> 
 
</html>

回答

0
#critics { 
      width: 80%; 
      background-color: red; 
     } 

嘿!您应该尝试使用#F00而不是红色将背景色设置为红色。这可能是一个基于浏览器的问题。尝试粘贴此:

#critics { 
      width: 80%; 
      background-color: #F00; 
     } 
0

海兰,

,如果你可以试试这个:

#critics { 
     background-color: red !important; 
     -moz-appearance: none !important; 
     } 
+0

谢谢你试试吧!但似乎问题不是固定的:(。我认为这只是我的浏览器再次演出。 – Tikhung

+0

你使用的是什么版本的Firefox?如果3X尝试升级到4X,确定 –

0

这个CSS代码

<style> 
    body { 
     font-family: georgia; 
     line-height: 1.3em; 
     background-color: #F3F4E4; 
     color: black; 
    } 

    p { 
     font-size: 17px; 
     font-style: italic; 

    } 
    #img1 { 
     width: 750px; 

    } 

    #img2 { 
     width: 600px; 
    } 

    #list { 
     font-size: 25px; 
    } 
    #list-item, #lala { 
     font-family: SignPainter; 
     font-size: 22px; 
    } 
    h2 { 
     font-family: SignPainter; 
     font-size: 40px; 
    } 
    #critics { 
     width: 80%; 
     background-color: #ff070c; 
    } 

</style>