2017-07-21 1 views
0

Ich versuche, die Grails 3 Web-App mit Krieg Befehl zu implementieren. Entwicklungsversion zeigt Blatt stilecht und nach auf die Produktionsserver bereitstellen seine nur vermasselt alles up .as CSS und JavaScript sind minimierte ich kann nicht wirklich herauszufinden, das Problem .... Beispiel in der Bildentwicklungsversion development version Produktionsversion Production versionGrails 3 Produktionsversion Sheet zeigt anders als develpement Version

ich oben Code bin mit Tab und unten CSS angezeigt werden ..

#tabsF { 
 
    float:left; 
 
    width:100%; 
 
    background:#efefef; 
 
    font-size:100%; 
 
    line-height:normal; 
 
    border-bottom:1px solid #666; 
 
} 
 
#tabsF ul { 
 
    PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 10px; LIST-STYLE-TYPE: none 
 
} 
 
#tabsF li { 
 
    display:inline; 
 
    margin:0; 
 
    padding:0; 
 

 

 
} 
 
#tabsF a { 
 
    float:left; 
 
    background: url(../images/tableftF.gif) repeat-y;; 
 
    margin: 1px; 
 
    padding:0px 10px 0px 4px; 
 
    text-decoration:none; 
 
} 
 
#tabsF a span { 
 
    float:left; 
 
    display:block; 
 
    background: url(../images/tabrightF.gif) no-repeat right top; 
 
    padding:5px 15px 4px 6px; 
 
    color:#666; 
 
} 
 
/* Commented Backslash Hack hides rule from IE5-Mac \*/ 
 
#tabsF a span {float:none;} 
 
/* End IE5-Mac hack */ 
 
#tabsF a:hover span { 
 
    color:#FFF; 
 
} 
 
#tabsF a:hover { 
 
    background-position:0% -42px; 
 
} 
 
#tabsF a:hover span { 
 
    background-position:100% -42px; 
 
} 
 

 
#tabsF #current a { 
 
    background-position:0% -42px; 
 
} 
 
#tabsF #current a span { 
 
    background-position:100% -42px; 
 
}
<div id="tabsF"> 
 
     <ul> 
 
      <li><a href="#tab1"><span> &nbsp;Viewer1 &nbsp;</span></a></li> 
 
      <li><a href="${createLink(controller: 'Jobque', action: 'viewer2')}"><span>&nbsp;Viewer2 &nbsp;</span></a></li> 
 
      <li><a href="${createLink(controller: 'Jobque', action: 'viewer3')}"><span>&nbsp;Viewer3 &nbsp;</span></a></li> 
 
     </ul> 
 
    </div>

+0

minimierte Dateien sind wirklich schwer zu debuggen, aber es ist wahrscheinlich nur eine Syntax irgendwo Fehler. Ich sehe nichts sofort offensichtlich, aber mit der Entwicklerkonsole in Chrome (wahrscheinlich zu firefox, aber ich weiß, Chrome gerade), können Sie versuchen, un-minifying die zugehörigen Dateien und sie nur visuell vergleichen, um zu sehen, ob Sie den Fehler erkennen können . Es wird wahrscheinlich etwas gering sein, wenn man es endlich finden, wie ein fehlendes Semikolon oder eine Reihenfolge der Attribute Problem, dass die minifier streng zu etwas erzwingt. – Daniel

+0

#tabsF ul { padding-right: 10px; PADDING-LINKS: 10px; PADDING-BOTTOM: 0px; RAND: 0 px; PADDING-TOP: 10px; LIST-style-type: kein } versuchen, das zu Kleinschreibung ändern, die erscheint nicht korrekte Syntax zu sein, wie in ist es wirklich 'padding-TOP' oder ist es' padding-top'? glaube nicht, dass alle diese Einträge gültig sind – Vahid

+0

@vahid Danke, dass es geholfen hat :) – user5758172

Antwort

0
  • Sie können die CSS-Regeln in Firefox-Entwickler-Tools für Chrome-Entwicklertools
  • sehen Wenn Sie möchten, können Sie die css/js minifation deaktivieren, wie unten gezeigt. Und bauen Sie den Krieg und sehen Sie, ob das Problem immer noch existiert, und Sie können sicherstellen, ob es das Problem mit der Minifunktion oder dem Problem mit Ihrem Code ist. Und wenn du erst einmal isoliert und das Problem behoben hast, aktiviere es erneut.

    //build.gradle 
    assets { 
        minifyJs = false 
        minifyCss = false 
    } 
    
+0

minifyJs = false das hat nicht geholfen .. es ist immer noch die verkleinerte Version von Javascript..Ist es becuase ich hab Asset Pipleline Syntax in Jsp? – user5758172