2013-06-20 144 views
0

工作這是我的CSS代碼CSS不使用Internet Explorer的工作,但與其他瀏覽器

@charset "utf-8"; 

/* CSS RESETS */ 
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, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-weight: inherit; 
    font-style: inherit; 
    font-size: 100%; 
    font-family: inherit; 
    vertical-align: baseline; 
    text-decoration:none; 
} 

/* GLOBAL TYPOGRAPHY AND GENERAL STYLES */ 
body {font-family: Tahoma, Geneva, sans-serif; font-size:11px; line-height:15px; color:#333;} 
h1, h2, h3, h4 {padding:18px 0 11px 0; line-height:19px; color:#333;} 
h1 a, h2 a, h3 a, h4 a {text-decoration:none;} 
h1 {font-size:17px;} 
h2 {font-size:16px;} 
h3 {font-size:14px;} 
h4 {font-size:13px;} 
p {padding: 0 0 10px 0;} 
a {color:#333; text-decoration:underline;} 
a:hover {text-decoration:none;} 
acronym {cursor: help; border-bottom: 1px dotted #555; } 
code {margin: 10px 15px; padding: 10px; border: 1px solid #CCC; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-weight: normal;display:block; overflow:auto; text-align:left; } 
blockquote {margin: 10px 15px; padding: 10px; border: 1px solid #CCC; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-weight: normal; font-style:italic; } 
strong {font-weight: bold; } 
del {text-decoration: line-through;} 
ul,ol {margin:0 0 0 20px;} 




/* GENERAL FIXES */ 
.clear_both {clear:both} 

/* BASIC LAYOUT */ 
body { background-image:url(../img/background.jpg) y-repeat;background-position:top center; background-repeat: no-repeat; height:100%;} 
#bgimg {width:100%; height:100%; background-image: url(../img/bg_stripes.png);text-align:center; background-repeat:repeat-x;} 
#wrapper { width:615px; margin:0 auto; padding:90px 0 40px 0; text-align:left;} 

/* HEADER */ 
#header { width:615px; height:42px; margin-top:-10%;} 
#header .logo {float:left;} 

/* CONTENT */ 
#content {width:614px; height:500px; overflow:hidden; position:relative; } 

/* Menu */ 
#menu {background-image: url(../img/img_effect.png); width:600px; height:41px; background-repeat: no-repeat; color:#6a6a6a; font-size:15px; line-height:12px; position:relative;} 
#menu a {text-decoration:none; color:black; padding:0 5px 0 3px; display:inline; } 
#menu a:hover { color: #EEE;} 
#menu .left { position:absolute; left:20px; top:-23px; } 
#menu .right { position:absolute; right:15px; top:-23px;} 

#footer { width: 100%; margin-top: -15px; height: 120px; float: left;} 
#footer2 { width: 100%; margin-top: -15px; height: 120px; float: left; background: url(../img/footer2.jpg) repeat-y; } 
#footer .col, #footer2 #footer_text .col { display: block; float: left; width: 300px; } 
#footer .col h2, #footer2 .col h2 { font: 20px 'Sansumi Regular', Helvetica, Arial, sans; letter-spacing: 0; color: #979797; margin: 16px 0 10px 0; } 

#pageFooter { width: 100%; float: left; padding-bottom: 0; background: url(../img/footer2.jpg) repeat-y; border: 1px; } 
#pageFooter #footer_text { font: 13px "Helvetica Neue", Helvetica, Arial, sans; color: #999999; width: 900px; margin: 0 auto; margin-top: 20px; } 
#pageFooter #footer_text a { font-weight: bold; } 
#pageFooter #footer_text a:hover { font-weight: bold; text-decoration: none; border-bottom: 1px dotted #777; } 
#pageFooter #footer_text img { float: left; } 

HTML代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<link rel="stylesheet" type="text/css" 

href="css/style1.css"/> 
<script type="text/javascript" 

src="js/css_browser_selector.js"></script> 
<title>Title Here</title> 
    </head> 
<body> 
    <div id="bgimg"> 
     <div id="wrapper"> 
      <div id="header" style="margin- 

top:-80px;margin-left:-300px"> 
       <div class="logo"> 
        <a href="#"><img 

src="img/logo.png" alt="logo" /></a> 
       </div><!-- END "logo" --> 



      </div><!-- END "header" --> 
<div id="menu" style="margin-top:50px;"> 
       <p class="left"> 
        <a href="#">Home</a>| 
        <a 

href="">About</a>| 
        <a 

href="">Works</a>| 
        <a 

href="">Contact</a>      </p> 
       <div class="clear_both"></div>    


      </div><!-- END "footer" --> 
<div id="content"> 
    <div class="introbox_holder" style="border:1px solid 

blue;height:100%"> 



<!----- Content here -------> 





</div><!-- END "introbox_holder" -->    

</div><!-- END "content" --> 


     </div><!-- END "wrapper" --> 
<div id="pageFooterWrapper" ><div id="pageFooter">   



<div id="footer2"> 
    <div id="footer_text"> 

     <div class="col"> 
      <img src="img/logo_footer.png" 

style="height:40px" alt="mft 2009"> 
      <b>jWeavers 2013</b><br> 
      designed by Ravi Kant Sharma 
     </div> 



     <div class="col"> 
      <img src="img/html5_css3.png" 

alt="squarespace"> 
      <span style="color:#777;"><b>HTML5 

and CSS3</b></span><br> 
      built with HTML5 and CSS3 
     </div> 



     <div class="col" style="font-size: 9px;"> 
       <!------------ right lower ------------> 
       </div> 


</div><!--footer2--> 

    </div></div> 
    </div><!-- END "bgimg" --> 


    </body> 
</html> 

我的CSS完全相同的工作,因爲我想在瀏覽器和Mozilla。但是,這是怎麼看起來像在Internet Explorer

enter image description here

然後,我開始想不通,爲什麼它不工作?但是,無法確定確切的問題。但是,我注意到一件事,當我刪除@charset "utf-8";時,Chrome和Mozilla也會發生同樣的情況。所以,任何人都可以幫助我理解,@charset "utf-8";的重要性如何讓我的css與Internet Explorer兼容。

+0

'背景圖像:網址(../ IMG/background.jpg)Y重複;'應'重複-y'。 您可以發佈您的HTML或JSFiddle鏈接。 –

+0

我改變了我的CSS代碼,但仍然無法正常工作。請檢查我的html代碼 – Ravi

+0

在IE7-10中適用於我:http://fiddle.jshell.net/vTTRh/show/ –

回答

0

我沒有看到任何特別的原因讓你在CSS中使用字符集,但我可能是錯的......無論如何,你在第42行有一個錯誤 - 它應該是「y-repeat」 「重複-Y」。

你能發佈您的HTML信息嗎?我可以在這裏嘗試。

LM

+0

已發佈...請檢查 – Ravi

0

瞧,你缺少一個右</div><div id="bgimg">這可能是問題。 此外,請嘗試使用適當的HTML5標籤,如<br /><img src='whateve.png" />

在CSS

,如果您使用的背景那樣的屬性,而不是用這個重複:...; background-repeat: repeat-y;...

試一試糾正失蹤</div> ...... 隨着這些更正其工作在這裏很好(IE,鉻和Firefox)

LM

+0

那麼,是否缺少關閉div標籤?你解決了嗎? –

相關問題