Die Tabellenzelle verliert den Rahmen, wenn der CSS-Gradientenfilter in IE8 angewendet wird

Fand ich die css-Grenze auf die Zelle in der Tabelle ist verloren, wenn die Anwendung von css-Gradienten filter zur gleichen Zeit. Es scheint, dass der gradient-Effekt überschreibt die Grenze.

Ist es ein browser-bug oder bin ich hier etwas fehlt?

Stil ist wie folgt definiert:

.c7 {
    color: #000000;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#c0c0c0',EndColorStr='#f0f0f0'); 
    border: #000000 1px solid;
    width: 100px;
    height: 30px;
}

[Update] konnte Sie einen opacity-filter und reduzieren Sie von 100 zu 1, und Sie können sehen, wie die Grenze entsteht allmählich. Es bestätigt meine Vermutung, dass der Farbverlauf zeigt über die Grenze.

Kommentar zu dem Problem - Öffnen
so toll finden. Als Sie sagte, der Verlauf überschreibt die Grenze, denn wenn Sie die Grenze viel größer die Steigung zu verlängern und überschreibt es. Ich suchte nach einer Lösung, aber keine Ergebnisse..hoffe jemand kennt einen trick Kommentarautor: Sotiris
+1 vielen Dank für dieses posting Kommentarautor: Garrett Bluma

InformationsquelleAutor der Frage Chris | 2010-08-12

  1. 6

    Ich habe eine Lösung, aber Sie mag es nicht...

    Wenn Sie die Darstellung im IE in quirks-Modus der Grenze rendert gut, es ist nur verdeckt, wenn Sie im Kompatibilitätsmodus. Vergleichen Sie diese beiden Seiten im IE8:

    Was auch funktioniert ist der Klick auf die Schaltfläche Kompatibilitätsansicht, aber meine versuche, um die gleichen Ergebnisse mit der Kompatibilitätsmodus-meta-tags waren erfolglos. Ich habe versucht, mit box-sizing, aber auch ohne Erfolg. Ich schließe daraus, der einzige Weg, um es zu arbeiten, wie Sie wollen, ist zu zwingen, den IE in den quirks-Modus, aber das kann so viele andere Probleme, für Sie ein layout, können Sie besser dran, nur das hinzufügen einer wrapper-element zu befestigen Farbverlauf hintergrund.

    InformationsquelleAutor der Antwort robertc

  2. 26

    Anwendung dieses funktioniert auch:

    position: relative;
z-index: -1;

    InformationsquelleAutor der Antwort frizz

  3. 6

    Verwenden Sie ein DIV-Element zu enthalten, die den Inhalt jeder Zelle. Wenden Sie den Verlauf, um das DIV-Element und setzen Sie die Grenze auf die Zelle. Der Verlauf beschränkt sich auf das DIV-Element und überschreiben nicht die Grenze.

    http://jsfiddle.net/WWCaj/1/

    InformationsquelleAutor der Antwort Stormalong

  4. 3

    Nach dem Versuch viele Korrekturen ich bin zu dem Schluss gekommen, dass seine einfach nicht Wert, versucht die CSS-filter. Ein Zitat von @mdo wer hinter dem Twitter bootstrap css:

    Filter sind gefährlich-Geschäft im IE, insbesondere 7 & 8. Ich würde lieber nicht mit denen, da würde es enorme performance-Verluste für Leute, die übernutzung Ihnen.

    Probleme, die ich traf Anwendung von css td Elemente:

    • Die position: relative funktioniert nur für IE9, IE8 nicht
    • Die z-index: -1 funktioniert nicht auf td-Elemente
    • Wenn Sie einen filter haben, dann haben Sie, um Sie auszuschalten für den Schwebeflug
    • Meinem Tisch sah besser aus mit den Grenzen, als dass die Gradienten auf die Zellen der Tabelle

    InformationsquelleAutor der Antwort icc97

  5. 1

    mit position: relative !wichtig;

    Seine Arbeit gut...

    InformationsquelleAutor der Antwort Siddhesh Jorwekar

  6. 1

    auf dem td:

      /* enough for IE9 */
  background-origin: padding-box;
  background-clip: padding-box;
  /* for IE8 */
  position: relative;

    arbeitete für mich.

    auch möchten Sie vielleicht zu Experimentieren mit border-collapse da dieser Fehler sich anders Verhalten zwischen 

      border-collapse: separate

    und

      border-collapse: collapse

    InformationsquelleAutor der Antwort user2245339

  7. 0

    Ich habe versucht, alle diese Lösungen, ohne Erfolg. So platzierte ich die Steigung in die tr und dann beschlossen, das ::before pseudo-element und style-eine Grenze auf. Jedoch, ich habe nicht einmal so weit wie das hinzufügen einer Grenze zum pseudo-element. Die folgenden genug war.

     table thead {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9e9d9',GradientType=0 );
    -ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9e9d9',GradientType=0 );
}
table th { 
   background: none;
   border-right: 1px solid #a5a694; 
   background-clip: padding-box;
   position: relative!important; 
   z-index: 100;
}
table th:before {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    content: '';
}

    Aber wenn das nicht funktioniert, Sie könnte auch hinzufügen, eine Grenze zu der pseudo-Klasse als ich ursprünglich geplant hatte:

    table th:before {
    border-right: 1px solid #000000;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    content: '';
    z-index: 1000;
}

    Pseudo-Klassen sind toll, ich benutze Sie die ganze Zeit, und Sie haben sehr Breite browser-Unterstützung, auch im IE8.

    InformationsquelleAutor der Antwort Nicole McCoy

Schreibe einen Kommentar