CSS가 IE에서로드되지 않고 다른 브라우저에서 작동합니까?

내 웹 사이트 작품은 IE를 제외한 모든 브라우저에서 작동합니다. IE 7 - 11에서 테스트했습니다. CSS가 전혀로드되지 않습니다. 내가 도대체 뭘 잘못하고있는 겁니까? 비슷한 코드를 사용하는 사이트에서 작업 해본 결과이 문제가 발생하지 않았습니다. 여기CSS가 IE에서로드되지 않고 다른 브라우저에서 작동합니까?

<!doctype html> 

<html> 
<head> 
<meta charset="UTF-8"> 
    <title>#</title> 
    <link rel="stylesheet" type="type/css" href="css/style.css"> 
    <link rel="stylesheet" type="type/css" href="css/responsive.gs.12col.css"> 
    <meta name="viewport" content="width=device-width"> 
</head> 

<body> 

    <header> 
     <div id="header-wrapper" class="clearfix"> 
     <a class="main-logo"href="#"><img src="img/logo.png" alt="logo"></a> 
     <ul class="contact-nav"> 
      <li><a href="#"><img src="img/mail2.png">Email Us!</a></li> 
      <li class="spacer">|</li> 
      <li><a href="#"><img src="img/phone.png">#</a></li> 
     </ul> 

     </div> 

    </header> 

     <a id="dropdown" href="#" title="Click This Button"><img src="img/burger_button.png" alt="burger button"><p></p></a> 

    <div class="nav"> 
     <ul class="navigation-bar" id="menu"> 
      <li><a class="active" href="index.html">HOME</a></li> 
      <li><a href="about.html">ABOUT</a></li> 
      <li><a href="testimonials.html">TESTIMONIALS</a></li> 
      <li><a href="vip.html">VIP</a></li> 
      <li><a href="contact.html">CONTACT</a></li> 
      <li><a href="careers.html">CAREERS</a></li> 
     </ul> 
    </div> 

    <div id="main-content" class="clearfix"> 


    <footer class="clearfix"> 





     <div class="footer_img"> 
     <img src="img/premier.png" alt="premier event"> 
     </div> 

     <p>2006 - 2015 © Privacy Terms of use. All trademarks are property of their owners.</p> 
    </footer> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <script src="js/jquery.fancybox.min.js"></script> 
    <script src="js/global.min.js"></script> 


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://arrow.scrolltotop.com/arrow89.js"></script> 


<script> 
$(document).ready(function(){ 

$(window).resize(function() { 

    if ($(this).width() < 960) { 

    $('.nav').hide(); 

    } else { 

    $('.nav').show(); 

    } 

}); 

    $('#dropdown').on('click',function(){ 

     $('.nav').slideToggle(); 

    }); 

}) 
</script> 

</body> 

</html>

를 CSS의 :

다음은 HTML의

* { 
    padding: 0; 
    margin: 0; 
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
} 
body { 
    font-family: "helvetica", arial, sans-serif; 
    width: 100%; 
    margin: 0; 
    background-color: #000; 
    background-image: url('../img/metallic_2.jpg'); 
    padding: 0; 
} 

header { 
    padding: 0; 
    margin: 0 auto; 
} 

header ul { 
    margin: 0 auto; 
    margin-top: 240px; 
    margin-right: 20px; 
    font-weight: lighter; 
    font-size: .8em; 
} 

header ul li { 
    padding: 0 5px 0 0; 
} 

header ul { 
    list-style-image: url('../img/phone.gif'); 
} 

ul.social-media { 
    float: right; 
    margin-top: 40px; 
} 

.social-media a:hover { 
    opacity: .7; 
} 

#header-wrapper { 
    max-width: 960px; 
    margin: 0 auto; 
    background: #000; 
    background: url('../img/background_header.png'); 
    background-repeat: no-repeat; 
    background-position: bottom; 
    /* border-top: solid 5px orange; */ 
} 

#header-wrapper ul{ 
    color: #fff; 
    float: right; 
} 

#header-wrapper li { 
    display: inline; 
} 

.main-logo img { 
    text-align: center; 
    margin: 0 auto; 
    max-width: 100%; 
    height: auto; 
    float: left; 
} 

.contact-nav a { 
    text-decoration: none; 
    color: #fff; 
} 

.contact-nav a:hover { 
    opacity: .7; 
} 

.contact-nav img { 
    width: 20px; 
    margin-right: 10px; 
} 

.nav { 
    background: #333; 
    clear: both; 
    max-width: 960px; 
    margin: 0 auto; 
    height: 50px; 
} 

.nav ul { 
    list-style: none; 
    text-align: ; 
    padding: 0; 
    margin: 0; 
    height: 30px; 
} 

.nav li { 
    display: ; 
    float: left; 
    padding: 0; 
    line-height: 30px; 
    height: 50px; 
    border-right: solid 1px #000; 
    border-bottom: solid 1px #000; 
} 

.nav li a{ 
    text-decoration: none; 
    color: #fff; 
    display: block; 
    padding: 10px 20px; 
    /* background: #333; */ 
    width: 100%; 
    transition: .3s; 
    font-size: .85em; 
    font-weight: bold; 

} 

.nav li a:hover { 
    background: orange; 
} 

.nav li a.active { 
    background: orange; 
} 

/* .nav li a:hover { 
    background-image: url('../img/background_nav.gif'); 
    background-position: center center; 
} 

.nav li a.active { 
    background-image: url('../img/background_nav.gif'); 
    background-position: center center; 
} */ 

#main-content { 
    margin: 0 auto; 
    max-width: 960px; 
    background-color: #000; 
    background-image: url('../img/background_main2.jpg'); 
    background-position: top; 
    background-repeat: no-repeat; 
    padding-top: 20px; 
} 

.videoWrapper { 
    margin: 0 auto; 
    max-width: 90%; 
    position: relative; 
    padding-bottom: 56%; /* 16:9 */ 
    padding-top: 25px; 
    height: 0; 
    float: none; 
} 

.videoWrapper iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

#main-content { 
    padding-bottom: 20px; 
} 

#main-content h1 { 
    text-align: center; 
    width: 95%; 
    padding: 20px 20px; 
    color: white; 
    font-size: 1.85em; 
    font-weight: lighter; 
    float: none; 
} 

#main-content p { 
    margin-top: 20px; 
} 


#main-content h1 { 
    margin: 0 auto; 
    padding: 20px; 
    width: 95%; 
    text-align: ; 
} 
.button { 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    width: 145px; 
    padding: 10px; 
    background: #0071BC; 
    border-bottom: solid 5px #006699; 
    text-align: center; 
    margin: 0 auto; 
    clear: both; 
    transition: .3s; 
} 

.button { 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    width: 145px; 
    padding: 10px; 
    background: #0071BC; 
    border-bottom: solid 5px #006699; 
    text-align: center; 
    margin: 0 auto; 
    clear: both; 
    transition: .3s; 
} 

.button:hover { 
    background: rgb(251,176,59); 
    border-bottom: solid 5px rgb(247,147,30); 

} 

.button1:hover { 
    background: rgb(251,176,59); 
    border-bottom: solid 5px rgb(247,147,30); 

} 

.button a, .button1 a { 
    color: #fff; 
    width: 145px; 
    text-decoration: none; 
} 

#secondary-content { 
    max-width: 960px; 
    margin: 0 auto; 
    background-color: #eee9e9; 
    padding: 40px 20px 20px 20px; 
} 

#secondary-content img { 
    width: 100%; 
    text-align: center; 
    padding-bottom: 10px; 
} 

#secondary-content p { 
    font-weight: lighter; 
    width: 90%; 
    text-align: center; 
    padding-bottom: 20px; 
    margin: 0 auto; 
} 

.graphs { 
    margin: 0 auto; 
    background: #fff; 
    text-align: center; 
    max-width: 960px; 
    padding-bottom: 20px; 
    padding-top: 20px; 
} 

.graphs img{ 
    width: 100%; 
} 

.image-holder { 
    width: 30%; 
    display: inline-block; 
    margin-left: 2.5%; 
    float: left; 
    margin-top: 20px; 
} 

.fifty { 
    float: left; 
    margin-left: 2.5%; 
    width: 45%; 
    margin-top: 50px; 
    margin-bottom: 100px; 
} 

blockquote { 
    margin-top: 50px; 
    width: 45%; 
    float: right; 
} 

.video img { 
    top: 0; 
} 

.clearfix:after { 
    content: "."; 
    visibility: hidden; 
    display: block; 
    height: 0; 
    clear: both; 
} 

footer { 
    max-width: 960px; 
    background-color: #333; 
    background-image: url('../img/moonsurface.png'); 
    background-position: 0% 75%; 
    background-repeat: no-repeat; 
    margin: 0 auto; 
} 

footer p { 
    font-size: .8em; 
    padding: 20px 10px; 
    text-align: center; 
    color: #fff; 
    clear: both; 
    width: 100%; 
} 

footer ul { 
    list-style: none; 
    text-align: center; 
    padding-top: 40px; 
} 

footer ul li { 
    display: inline; 
} 

.footer_img { 
    width: 30%; 
    float: right; 
    padding-top: 40px; 
    padding-right: 5%; 
} 

.footer_img img { 
    width: 100%; 
} 

.social_media { 
    margin: 0 auto; 
    width: 30%; 
    float: left; 
    text-align: center; 
    padding-right: 2.5%; 
    padding-left: 5%; 
} 

.social_media ul { 
    margin: 0 auto; 
    width: 100%; 
} 

#dropdown { 
    display: none; 
} 

.videos { 
    max-width: 960px; 
    margin: 0 auto; 
    background: #eee9e9; /* -- #faebd7 alternate color -- */ 
    padding: 20px; 
    /* border-top: solid 5px #483c32; */ 
} 



@media all and (max-width: 767px) { 
    header ul { 
    margin: 40px auto; 
    font-weight: lighter; 
    float: none; 
    text-align: center; 
} 

header ul li { 
    font-size: .9em; 
    padding: 0 5px; 
} 

    header img { 
    margin: 0 auto; 
    } 

header { 
    max-width: 100%; 
} 


.image-holder { 
    width: 80%; 
    display: block; 
    float: none; 
    margin: 0 auto; 
    margin-bottom: 20px; 
    margin-top: 20px; 
} 



#header-wrapper ul{ 
    color: #fff; 
    list-style: none; 
    float: none; 
} 

.social_media { 
    margin: 0 auto; 
    width: 100%; 
    float: none; 
    text-align: center; 
    padding-left: 0; 
} 

.footer_img { 
    width: 50%; 
    float: none; 
    padding-top: 20px; 
    padding-right: 0; 
    margin: 0 auto; 
    text-align: center; 
} 

} 

@media all and (max-width: 959px) { 

    #header-wrapper { 
     background: none; 
    } 

    .main-logo img { 
     margin-left: 16%; 
     margin-right: 20%; 
     float: none; 
     width: 65%; 
    } 

    header ul { 
    width: 100%; 
    margin: 40px auto; 
    font-size: 1rem; 
    float: none; 
    text-align: center; 
    } 

    header ul li { 
     font-size: 1rem; 
     width: 95%; 
    } 

    .nav { 
     height: 306px; 
     display: none; 
    } 
    .nav li { 
     float: none; 
     height: 51px; 
     border-bottom: solid 1px #000; 
     text-align: center; 
    } 

    #main-content h2 { 
     font-size: 1.25em; 
    } 

#dropdown { 
    display: block; 
    color: #fff; 
    text-align: center; 
    text-decoration: none; 
    padding: 10px; 
    background: #0e2d42; 
    line-height: 30px; 
} 

#dropdown img { 
    background-position: center; 
    height: 18px; 
    vertical-align: middle; 
} 

#dropdown p { 
    display: inline; 
    margin-left: 6px; 
    font-size: 1.25em; 
    vertical-align: middle; 
} 

    #main-content h1 { 
    text-align: center; 
    width: 90%; 
    padding: 20px 20px; 
    font-size: 2em; 
    font-weight: lighter; 
    float: none; 
} 

.fifty { 
    text-align: center; 
    float: none; 
    margin-left: 2.5%; 
    width: 100%; 
    margin-top: 50px; 
    margin-bottom: 100px; 
} 

blockquote { 
    text-align: center; 
    margin-top: 50px; 
    width: 100%; 
    float: none; 
} 

.image-holder { 
    max-width: 100%; 
} 

} 




    /* First make sure the video thumbnail images are responsive. */ 
    .video img { 
     max-width: 100%; 
     height: auto; 
    } 

    /* 
    This is the starting grid for each video with thumbnails 5 across for the largest screen size. 
    It's important to use percentages or there may be gaps on the right side of the page. 
    */ 
    .video { 
    background: none; 
    width: 31%; /* Thumbnails 3 across */ 
    margin: 1%; 
    margin-bottom: 0; 
    margin-top: 1%; 
    float: left; 
    } 

    /* These keep the height of each video consistent between YouTube and Vimeo. 
    Each can have thumbnail sizes that vary by 1px and are likely break your layout. */ 
    .video figure { 
    height: 0; 
    padding-bottom: 60%; 
} 

    .video h2 { 
     text-align: center; 
     font-weight: lighter; 
     color: #eee9e9; 
     font-size: 1.25em; 
     display: none; 
    } 

    /* Media Queries - This is the responsive grid. */ 
    @media all and (max-width: 960px) { 
    .video { 
     width: 23%; /* Thumbnails 4 across */ 
    } 
    } 
    @media all and (max-width: 1024px) { 
    .video { 
     width: 48%; /* Thumbnails 2 across */ 
    } 

    } 
    @media all and (max-width: 600px) { 
    .video { 
     display: block; 
     width: 96%; /* Single column view. */ 
     margin: 2%; /* The smaller the screen, the smaller the percentage actually is. */ 
     float: none; 
    } 
    } 

    /* These are my preferred rollover styles. */ 
    .video img { 
    width: 100%; 
    opacity: 1; 
    } 
    .video img:hover, .video img:active, .video img:focus { 
    opacity: 0.75; 
    }

출처

2015-01-15 Erik S

머리글에 CSS를 연결하는 대신 CSS를 포함하면 어떻게됩니까? –

5 가지 다른 버전의 IE에서 테스트 해 보셨습니까? 또는 IE11 개발자 도구를 사용하여 이전 브라우저에서 페이지가 어떻게 렌더링되는지 확인할 수 있습니까? 후자는 오래된 브라우저에서 기본 지원을 테스트하는 것과 같지 않습니다. – TylerH

캐시 문제 일 수 있습니까? 캐시를 지우고 수정했는지 확인하십시오. – coopersita

귀하의 링크 속성이 올바르지 않습니다. type="type/css" 대신 type="text/css"을 사용해야합니다.

출처

2015-01-15 19:20:10 TylerH

OMG. 고맙습니다. 내가 그것을 타이핑 할 때 나는 무엇을 생각하고 있었는지 모른다. 내가 그것을 변경하자마자 사이트가 IE에 올바르게로드되었습니다. 다시, 너 정말 많이! 하하 –

값이 "text/css" 인 것은 콘텐츠가 CSS임을 나타냅니다. <link> 태그는 head 섹션 내에서 진행됩니다

<head> 
    <link rel="stylesheet" type="text/css" href="mystyle.css"> 
</head>

외부 스타일 시트는 텍스트 편집기로 작성 할 수 있습니다. 파일에 html 태그가 없어야합니다. 스타일 시트 파일은 .css 확장자로 저장해야합니다.

출처

2015-01-15 20:58:18 Kapil

CSS가 IE에서로드되지 않고 다른 브라우저에서 작동합니까?

답변

관련 문제