CSS在FF和Chrome中看起来很棒但在IE8中却看不到

时间：2011-04-10 01:32:52

标签： css

是的另一个问题有点独特，因为我无法在任何地方找到相同的问题。我正在尝试建立一个网站，到目前为止它在FF和Chrome看起来很棒，但在IE8中看起来像废话。我不知道如何解决它一直在寻找其他人，看看他们是否像我的一样但不是。 该网站是funspot.zxq.net是的我会改变它，这只是我的开始，但这是代码

    <html>
<head>
 <title>The Fun Spot </title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">

<div id="header">

</div>

<div id="horizontalnav">
   <div class="navlinks ">
        <ul>
        <li><a href="http://www.Facebook.com" target="_blank">Facebook</a></li>
        <li><a href="http://www.gaiaonline.com" target="_blank">Gaia</a></li>
        <li><a href="http://www.roblox.com" target="_blank">Roblox</a></li>
        <li><a href="http://www.adventurequest.com" target="_blank">Adventure Quest</a>        </li> 
        <li><a href="http://www.animefreak.tv" target="_blank">Anime Freak</a></li>
        <li><a href="http://www.youtube.com" target="_blank">Youtube</a></li>
        </ul>
    </div>
</div>

<div id="leftnav">
    <p>Info: Love the Knicks as you can see so when I post some stuff here about this. This site would be about me and get better as I become a better developer. </p>
</div>


<div id="theMeat" >
    <p><img src="AmareStoudemireNY.jpg" alt="Amare Stoudemire" > This is my favorite Knicks Player right now.  Even though Carmelo Anthony is awesome, Stoudemire started the road to the playoffs not really 100% by himself but by himself.  </p>

    <p> <img src="ewing_knicks.jpg" alt="Patrick Ewing" > This is the man and my favorite player of all times! He was great and I wish that they never traded him his final year because that was an a injustice.  He gave them all he ever had and they dissed him, if you agree send me a email. <a href="mailto:daddycardona@gmail.com">Daddy</a></p>

    <p><img src="favoriteKnicksTeam.jpg" alt="1994 Team" > Now this here is the team you dont forget about.  I think the Knicks put together alot of awesome teams but this one was my Favorite.  The starters were Patrick Ewing, Anthony Mason, Derek Harper, John Starks, and Charles Oakley. Oh and Pat Riley as the coach. Yeah baby.</p>

</div>

<div id="rightnav">

    <p>There will be site's that helped me create this site OOH Rah </p>

</div>

<div id="footer">
<p align="center">Date Edited 20110408</p>
</div>


</div>
</body>
</html>

和CSS 

#container  {
width: 100%;
}

#header{
width: 89%;
height: 15%;
position: relative;
background-image: url(Header.jpg);
border-bottom: 2px solid #000000;

}

#horizontalnav  {
width: 89%;
height: 30px;
position: relative;
background-color: #00008B;
border-bottom: 2px solid #000000;
}
.navlinks  {
position: absolute; top: 4px; left:240px; 
}
.navlinks ul { 
margin: auto;
}
.navlinks li {
margin: 0px 18px 0px 0px;
list-style-type: none;
display: inline;
}
.navlinks li a {
color: #FF8C00;
padding: 5px 12px 7px;
text-decoration: none;
 font-size: 16px;
 font-family: Courier New;
}
 .navlinks li a:hover{
 color: #ffffff;
 text-decoration: underline;
} 
#header p  {
color: #000000;
font-family: Courier New;
font-weight: bold;
}
#leftnav {
float: left;
width: 10%;
height: 70%;
background-color: #00008B;
border-right: 1px dashed #694717;
}
#leftnav p{
 color : #FF8C00 ;
font-family : Courier New ;
font-size : 16px ;
}       

#rightnav  {
float: left;
width: 9.9%;
height: 70%;
background-color: #00008B;
border-left: 1px dashed #694717;
}
#rightnav p{
color : #FF8C00 ;
font-family : Courier New ;
font-size : 16px ;
 }
#theMeat  {
 background-color: #FF8C00 ;
 overflow : auto ;
 float: left;
 width : 68.9% ;
 height : 70% ;
 padding: 0px 0px 0px 0px;
 }
#theMeat p {
color : #00008B ;
font-family : Courier New ;
font-size : 16px ;
}

#footer  {
clear: both;
 background-color: #00008B;
width : 88.9% ;
}
#footer p{
color : #FF8C00 ;
font-family : Courier New ;
font-size : 16px ;
}

2 个答案:

答案 0 :(得分：0)

你处于怪癖模式，IE不会尝试像其他更现代的浏览器那样执行。将其添加到第一行：<!doctype html>。然后看看我们的立场。

答案 1 :(得分：0)

在这里我修复了它在ie8中的样子。我将高度从百分比更改为像素，并且工作正常。 如果这对您有用，请使用它。

以下是http://i.stack.imgur.com/en1P0.png enter image description here

的外观

HTML 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<HTML><HEAD><TITLE>The Fun Spot</TITLE>
<META content="text/html; charset=windows-1252" http-equiv=Content-Type><LINK 
rel=stylesheet type=text/css href="/style.css">
<META name=GENERATOR content="MSHTML 8.00.6001.19019"></HEAD>
<BODY>
<DIV id=container>
<DIV id=header></DIV>
<DIV id=horizontalnav>
<DIV class="navlinks ">
<UL>
  <LI><A href="http://www.facebook.com/" target=_blank>Facebook</A> 
  <LI><A href="http://www.gaiaonline.com/" target=_blank>Gaia</A> 
  <LI><A href="http://www.roblox.com/" target=_blank>Roblox</A> 
  <LI><A href="http://www.adventurequest.com/" target=_blank>Adventure Quest</A> 

  <LI><A href="http://www.animefreak.tv/" target=_blank>Anime Freak</A> 
  <LI><A href="http://www.youtube.com/" target=_blank>Youtube</A> 
</LI></UL></DIV></DIV>
<DIV id=leftnav>
<P>Info: Love the Knicks as you can see so when I post some stuff here about 
this. This site would be about me and get better as I become a better developer. 
</P></DIV>
<DIV id=theMeat>
<P><IMG alt="Amare Stoudemire" src="stack_files/AmareStoudemireNY.jpg"> This is 
my favorite Knicks Player right now. Even though Carmelo Anthony is awesome, 
Stoudemire started the road to the playoffs not really 100% by himself but by 
himself. </P>
<P><IMG alt="Patrick Ewing" src="stack_files/ewing_knicks.jpg"> This is the man 
and my favorite player of all times! He was great and I wish that they never 
traded him his final year because that was an a injustice. He gave them all he 
ever had and they dissed him, if you agree send me a email. <A 
href="mailto:daddycardona@gmail.com">Daddy</A></P>
<P><IMG alt="1994 Team" src="stack_files/favoriteKnicksTeam.jpg"> Now this here 
is the team you dont forget about. I think the Knicks put together alot of 
awesome teams but this one was my Favorite. The starters were Patrick Ewing, 
Anthony Mason, Derek Harper, John Starks, and Charles Oakley. Oh and Pat Riley 
as the coach. Yeah baby.</P></DIV>
<DIV id=rightnav>
<P>There will be site's that helped me create this site OOH Rah </P></DIV>
<DIV id=footer>
<P align=center>Date Edited 20110408</P></DIV></DIV></BODY></HTML>

CSS 

    #container {
    WIDTH: 100%
}
#header {
    BACKGROUND-IMAGE: url(http://funspot.zxq.net/Header.jpg); BORDER-BOTTOM: #000000 2px solid; POSITION: relative; WIDTH: 89%; HEIGHT: 100px;}
#horizontalnav {
    BORDER-BOTTOM: #000000 2px solid; POSITION: relative; BACKGROUND-COLOR: #00008b; WIDTH: 89%; HEIGHT: 30px
}
.navlinks {
    POSITION: absolute; TOP: 4px; LEFT: 240px
}
.navlinks UL {
    MARGIN: auto
}
.navlinks LI {
    LIST-STYLE-TYPE: none; MARGIN: 0px 18px 0px 0px; DISPLAY: inline
}
.navlinks LI A {
    PADDING-BOTTOM: 7px; PADDING-LEFT: 12px; PADDING-RIGHT: 12px; FONT-FAMILY: Courier New; COLOR: #ff8c00; FONT-SIZE: 16px; TEXT-DECORATION: none; PADDING-TOP: 5px
}
.navlinks LI A:hover {
    COLOR: #ffffff; TEXT-DECORATION: underline
}
#header P {
    FONT-FAMILY: Courier New; COLOR: #000000; FONT-WEIGHT: bold
}
#leftnav {
    BACKGROUND-COLOR: #00008b; WIDTH: 10%; FLOAT: left; HEIGHT: 400px; BORDER-RIGHT: #694717 1px dashed
}
#leftnav P {
    FONT-FAMILY: Courier New; COLOR: #ff8c00; FONT-SIZE: 16px
}
#rightnav {
    BORDER-LEFT: #694717 1px dashed; BACKGROUND-COLOR: #00008b; WIDTH: 9.9%; FLOAT: left; HEIGHT: 400px;
}
#rightnav P {
    FONT-FAMILY: Courier New; COLOR: #ff8c00; FONT-SIZE: 16px
}
#theMeat {
    PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #ff8c00; PADDING-LEFT: 0px; WIDTH: 68.9%; PADDING-RIGHT: 0px; FLOAT: left; HEIGHT: 400px; OVERFLOW: auto; PADDING-TOP: 0px
}
#theMeat P {
    FONT-FAMILY: Courier New; COLOR: #00008b; FONT-SIZE: 16px
}
#footer {
    BACKGROUND-COLOR: #00008b; WIDTH: 88.9%; CLEAR: both
}
#footer P {
    FONT-FAMILY: Courier New; COLOR: #ff8c00; FONT-SIZE: 16px
}
相关问题
最新问题