工作這是我的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
然後,我開始想不通,爲什麼它不工作?但是,無法確定確切的問題。但是,我注意到一件事,當我刪除@charset "utf-8";
時,Chrome和Mozilla也會發生同樣的情況。所以,任何人都可以幫助我理解,@charset "utf-8";
的重要性如何讓我的css與Internet Explorer兼容。
'背景圖像:網址(../ IMG/background.jpg)Y重複;'應'重複-y'。 您可以發佈您的HTML或JSFiddle鏈接。 –
我改變了我的CSS代碼,但仍然無法正常工作。請檢查我的html代碼 – Ravi
在IE7-10中適用於我:http://fiddle.jshell.net/vTTRh/show/ –