Linear-Gradient funktioniert nicht in Chrome

Question

Nach einer guten Menge von Suche bin ich mit linearen Gradienten stecken, die in Firefox funktioniert, aber nicht in Chrome.

Ich habe -webkit- vor linearen Gradienten wie in einem Referenz beschrieben, aber immer noch nicht glaube, ich das Problem in Gradientenachse ist

Mein Code

<nav class="top_menu"> 
    <ul class="black_high"> 
     <li class="first active"> <a href="#">Home</a> 

     </li> 
     <li> <a href="#">news</a> 

     </li> 
    </ul> 
</nav> 

.top_menu ul li.active a::after { 
    position: absolute; 
    bottom: 8px; 
    left: 0; 
    width: 100%; 
    height: 2px; 
    transform:none; 

    content: ''; 
    opacity: 1; 
    background: #fff; 
    background: linear-gradient(left, transparent 0%,#fff 50%,transparent 100%); 
    background: -moz-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%); 
    background: -webkit-gradient(left, transparent 0%,#fff 50%,transparent 100%); 
} 

schafft hier eine Geige - http://jsfiddle.net/h2zu5xx2/4/

Jeder Tipp/Vorschlag wird gut tun. Danke im Voraus.

Answer 1

Zunächst einmal zur Kenntnis, dass -webkit-gradient von Apple und im Jahr 2008 in Webkit-basierten Web-Browser (zB Safari 4), der eine ziemlich andere Syntax als der W3C-Standard implementiert gedacht war:

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) 

Zum Beispiel:

background: -webkit-gradient(linear, left top, right top, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); 

Aus diesem Grund konnten Sie in Ihrem Fall nicht zur Arbeit kommen.

Ein Jahr später Mozilla eingeführt -moz-linear-gradient (seit Firefox 3.6), die auch eine andere Syntax als die alte Webkit-Version hat aber dann setzte es in Webkit unter -webkit-linear-gradient:

-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+) 

jedoch die W3C-Standard-Version von linear-gradient ist ruhig anders, ist die Syntax für linear-gradient() Ausdruck:

linear-gradient() = linear-gradient(
    [ <angle> | to <side-or-corner> ]? , 
    <color-stop-list> 
) 
<side-or-corner> = [left | right] || [top | bottom] 

Wie man sieht, sind die anderen Fehler in Ihrem Code geschrieben zu sehen sind der Mangel an to <side> in der W3C-Version. Daher sollte es in Ihrem Fall sein:

Example Here.

background: -webkit-gradient(linear, left top, right top, color-stop(0%, transparent), color-stop(50%,#fff), color-stop(100%,transparent)); /* Chrome, Safari4+ */ 
background: -webkit-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%); /* Chrome10+, Safari5.1+ */ 
background: -moz-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%); /* FF3.6+ */ 
background: linear-gradient(to left, transparent 0%,#fff 50%,transparent 100%);  /* W3C */ 

Answer 2

Verwenden

background: -webkit-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%); 

als ähnliche Definition auf Mozillas.