-1

これは私のcssコードです

@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 は、Chrome と Mozilla で思いどおりに動作します。しかし、これは Internet Explorer での表示方法です。

ここに画像の説明を入力

次に、なぜ機能しないのかを理解し始めます。しかし、正確な問題を特定することはできません。しかし、 を削除する@charset "utf-8";と、Chrome と Mozilla でも同じことが起こることに気付きました。だから、誰でも私が理解するのを手伝ってくれます@charset "utf-8";.CSSをInternet Explorerと互換性を持たせる方法の重要性は何ですか.

4

2 に答える 2

0

CSSで文字セットを使用する特別な理由はありませんが、間違っている可能性があります...とにかく、42行目にエラーがあります-「y-repeat」である場合、「repeat-y」にする必要があります"。

HTMLソースを投稿できますか? ここで試すことができます。

LM

于 2013-06-20T15:12:07.237 に答える