只有一個外部CSS沒有加載到網站

Question

我面臨着一個奇怪的問題，我的外部CSS文件。我正在創建jsp網站，其中我有3個外部CSS文件分別爲手機，平板電腦和桌面。在本地開發環境中，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文件沒有加載

<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損失的代碼格式，並顯示爲一個單一的字符串。

@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到擴展名爲.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)">？它有一個最大寬度：768px，這隻對寬度爲481 - 768像素的視圖尺寸起作用。在這些範圍之外，css會加載但不會被執行。

Answer 3

有幾件事情嘗試：

• 通過validator運行你的CSS，以確保它不是一個簡單的語法錯誤。
• 確保它不是緩存問題 - 如果您無法更改服務器設置，請通過將版本參數寫入.css文件來嘗試緩存。
• 連接你的CSS文件 - 無論如何你應該這樣做，以及縮小，以優化性能。 Grunt是一個很好的JavaScript任務運行程序，您可以將其放入可以爲您處理此問題的部署策略中。 GitHub example。
• 切換到Sass（比常規CSS更清潔），並使用Compass爲您連接和縮小。

否則，在沒有更多信息的情況下查明問題有點困難。