웹 사이트에 하나의 외부 CSS가로드되지 않습니다.

Question

외부 CSS 파일에 이상한 문제가 있습니다. 나는 모바일, 태블릿 및 데스크탑 각각에 대해 3 개의 외부 CSS 파일이있는 jSP 웹 사이트를 만들고 있습니다. css 파일은 로컬 개발 환경에서 잘로드됩니다. 그들의 포함하는 문장은 아래와 같습니다.

<link rel="stylesheet" type="text/css" href="<c:out value="${pageContext.request.contextPath}"/>/css/style_eng.css" /> 
<link rel="stylesheet" type="text/css" href="<c:out value="${pageContext.request.contextPath}"/>/css/mobile_eng.css" media="only screen and (max-width:480px)"> 
<link rel="stylesheet" type="text/css" href="<c:out value="${pageContext.request.contextPath}"/>/css/tablet_eng.css" media="only screen and (min-width:481px) and (max-width:768px)"> 
<link rel="stylesheet" type="text/css" href="<c:out value="${pageContext.request.contextPath}"/>/css/style_eng.css" media="only screen and (min-width:769px)"> 

JSTL 문은 문을 내 문제가 tablet_eng.css 파일이로드되지 않는 것입니다 이제

<link rel="stylesheet" type="text/css" href="/ns/css/style_eng.css" /> 
<link rel="stylesheet" type="text/css" href="/ns/css/mobile_eng.css" media="only screen and (max-width:480px)"> 
<link rel="stylesheet" type="text/css" href="/ns/css/tablet_eng.css" media="only screen and (min-width:481px) and (max-width:768px)"> 
<link rel="stylesheet" type="text/css" href="/ns/css/style_eng.css" media="only screen and (min-width:769px)"> 

입니다 소스 코드에서 벌금과에서 일하고있다. 파일이 뷰 소스에 있더라도. 크롬에서 나는 tablet_eng.css가 코드 포맷을 잃어 버리고 단일 문자열로 나타나는 것을 알아 차렸다.

@charset "utf-8"; /* CSS Document */ body { font-size:.75em; } /*HeaderDiv */ .phoneMenu { display:none; } .LogImage { display:none; } .ArabicHome a { background-color:#e9ecef; position:absolute; top:45px; right:30px; font-size:1.3em; font-family:Tahoma, Geneva, sans-serif; font-weight:bold; width:25px; height:25px; background:url(../image/arabic_icon2.PNG) no-repeat center; background-size:20px 20px; border:solid #bfc7cf 1px; } .HeaderDivWrapper { border-bottom:solid #2a4660 4px; width:100%; position:relative; overflow:hidden; } .HeaderDiv { max-width:768px; background:url(../image/head_back.png) no-repeat; background-size:auto 100%; background-position:right top; padding:18px; height:100px; } #headerLogo p { background:url(../image/logo_mun_tab.png) no-repeat; padding-left:80px; padding-top:37px; } #menuDiv ul li { background:url(../image/arrow_down_tab.PNG) no-repeat center right; margin-left:15px; padding-right:10px; } #menuDiv { /*float:right; */ margin-top:100px; } /*end HeaderDiv */ /*Roll CSS*/ #rollDivWrapper { width:100%; position:relative; } #rollDiv { position:relative; max-width:768px; } #rollText { width:99.5%; max-width:768px; background:rgb(255,24,26); background-color:rgba(255,24,26, .8); padding:8px; color:#FFF; position:relative; left:0%; right:0; bottom:0; top:auto; font-size:.8em; border:none; -webkit-border-top-right-radius:0em; -webkit-border-bottom-left-radius:0em; -moz-border-radius-topright:0em; -moz-border-radius-bottomleft:0em; border-top-right-radius:0em; border-bottom-left-radius:0em; } #rollText a { position:relative; left:50%; line-height:2em; padding:.2em; -webkit-border-radius:.15em; -moz-border-radius:.15em; border-radius:.15em; } .bx-wrapper .bx-prev { display:none; } .bx-wrapper .bx-next { display:none; } #rollText h2 { font-size:2em; font-weight:bold; margin-bottom:.5em; margin-right:15px; width:100px; float:left; } #rollText p { font-size:1em; margin-bottom:.5em; } #rollText span { font-weight:bold; float:right; } #changeimg1 { display:none; } #changeimg2 { display:block; } #Bullet { position:absolute; top:55%; right:5%; } #Bullet ul li { display:inline; margin-left:20px; } #Bullet ul li img { width:15px; height:15px; } /*End of Roll CSS*/ /*followLink CSS*/ #followUS h2 { display:none; } #pclink { display:none; } #smartlink { display:block; float:right; } #smartlink ul li { display:inline; } #demo2 { margin-top:0px; } #Projects { width:30%; margin-left:3%; float:left; } .Projects1 { } .Projects2 { } .Projects3 { } #followLink { max-width:1000px; margin:0 auto; padding:18px; position:relative; } #followUSWrapper { width:100%; position:relative; float:right; bottom:0; margin-top:18px; } #shareThis { width:25%; position:relative; float:left; display:none; } #followUS { width:50%; position:relative; float:right; bottom:0; } #likeNet { float:right; width:50%; position:relative; } #likeNet #likeNetIn { float:left; width:66px; background:url(../image/share_box.png) no-repeat center top; margin-right:10px; margin-bottom:0px; padding-top:5px; } #likeNet ul li span { margin-left:20px; font-size:.9em; color:#0195f8; } #likeNet ul li img { margin-top:11px; } #likeNet ul li { display:inline; } /* End followLink CSS*/ /*news And Event CSS*/ /*End of news And Event CSS*/ /*Advertisement Roll*/ #AdvWrapper { display:none; } /*End of Advertisement Roll*/ /*footer CSS*/ #footerWrapper { background-color:#2a4660; } #footer { max-width:1000px; margin:0 auto; padding:25px; position:relative; overflow:hidden; } .footerOne { float:left; width:25%; border-right:solid #FFF 1px; padding-bottom:400px; margin-bottom:-400px; } .footerTwo { float:left; width:25%; margin-left:3%; border-right:solid #FFF 1px; height:100%; padding-right:10px; padding-bottom:400px; margin-bottom:-400px; } .footerThree { float:left; width:28%; margin-left:3%; border-right:solid #FFF 1px; padding-bottom:400px; margin-bottom:-400px; display:none; } .footerThreeMob { background-color:#09F; position:fixed; bottom:0; right:0%; padding:5px; display:block; width:80px; } .footerThreeMob p a { color:#2a4660; } .footerThreeMob p a:link { color:#FFF; text-decoration:none; } .footerThreeMob p a:visited { color:#FFF; text-decoration:none; } .footerThreeMob p a:hover { color:#bfc7cf; text-decoration:none; } .footerThreeMob p a:active { color:#2a4660; text-decoration:none; } .footerThreeMobIn { margin-top:10px; display:none; } .footerFour { float:left; width:25%; margin-left:3%; padding-bottom:400px; margin-bottom:-400px; } #Copyright { float:left; width:100%; margin-top:15px; margin-bottom:0px; padding-bottom:400px; margin-bottom:-400px; background-color:#2a4660; padding-top:15px; z-index:1; } /*End of footer CSS*/ #ContactMap { margin-top:145px; margin-left:20px; } .LoginMenuIn { margin-left:0%; } 



Update: i have used web developer plugin and it is catching an error "Timestamp: 2/8/2014 5:26:42 PM 
Error: The stylesheet http://websrv.municipality.gov.bh/ns/css/tablet_eng.css was not loaded because its MIME type, "text/html", is not "text/css". 
Source File: http://websrv.municipality.gov.bh/ns/indexEn.jsp 
Line: 0" 

Answer 1

해결 : Java 필터를 작성하고 확장명이 .css 인 모든 요청에 ​​text/css를 추가합니다.

if(request.getHeader("accept")!=null && request.getHeader("accept").indexOf("css") != -1){ 
     response.setHeader("Content-Type", "text/css"); 
    } 

Answer 2

브라우저의 너비는 얼마입니까? 왜냐하면 그것에 media="only screen and (min-width:481px) and (max-width:768px)"> 통지? 최대 너비 : 768 픽셀이며 너비가 481 - 768 픽셀 인보기 크기에서만 적용됩니다. 이러한 범위를 벗어나면 CSS가로드되지만 구현되지는 않습니다.

Answer 3

몇 가지 시도 :

• 은 간단한 구문 오류가 있지 않은지 확인하기 위해 validator를 통해 CSS를 실행합니다.
• 캐싱 문제가 아닌지 확인하십시오. 서버 설정을 변경할 수없는 경우 .css 파일에 버전 매개 변수를 작성하여 캐시 버스터를 사용해보십시오.
• CSS 파일을 연결하십시오. 성능 최적화를 위해 확장과 함께 어쨌든이 작업을 수행해야합니다. Grunt는 이것을 처리 할 수있는 배포 전략에 넣을 수있는 좋은 JavaScript 작업 실행기입니다. GitHub example.
• Sass (일반 CSS보다 깔끔함)로 전환하고 Compass를 사용하여 연결하고 축소합니다.

그렇지 않으면 자세한 정보없이 문제를 찾아내는 것이 약간 어렵습니다.