IE-Hack mit Kompatibilitätsmodus

  • Huhu,

    habe eine Intranetseite, die auch mit IE(11, 10, ...) betrieben wird - dort wohl häufig im Kompatibilitätsmodus.
    Die Seite beinhaltet eine Tabelle mit folgendem CSS:

    Code
    1. tr {height:20px;}
    2. * html tr {height:19px;} <=> scheint im IE11 (auch mit Kompatibilitätsmodus) ignoriert zu werden
    3. * + html tr {height:19px;} <=> scheint im IE11 (auch mit Kompatibilitätsmodus) ignoriert zu werden


    und


    Code
    1. td {border-bottom:1px #999 dotted;}


    Mein Problem ist also, dass IE mit Kompatibilitätsmodus pro Zeile immer 20px+1px(border) und FF, ... pro Zeile jeweils 20px insgesamt darstellt.

    Alle Hacks die ich versucht habe werden ignoriert. IE im Kompatibilitätsmodus zeigt immer 20+1px je Zeile und nicht wie gewünscht 19+1px an.


    Dieses Meta-Tag hatte ich auch schon mal erfolglos probiert:


    Code
    1. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>



    Da ich das Problem sonst nicht googlen konnte gehe ich fast davon aus, dass ich einen Fehler mache. Bzw. ich stehe schon ein paar Tage aufm Schlauch.
    Habe das Gefühl, dass der IE >= 8 die Hacks nicht interpretiert und dann alles (ohne die Hacks) wie ein alter IE darstellt - wie komme ich da raus?

    Dank und Gruß
    Olz.

  • Code
    1. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>


    ist falsch


    richtig wäre

    Code
    1. <meta http-equiv="X-UA-Compatible" content="edge"/>


    Darüber hinaus ist es nicht sinnvoll einer Tabelle eine feste Zeilenhöhe zu geben, da eine Tabelle sich nach unten ausdehnen sollte, wenn der Inhalt der Felder grösser wird.


    Um genaueres zu sagen brauchen wir einen Link zu der Seite.

  • Hi, erst mal danke für die Antwort.


    Einen Link kann ich leider nicht liefern.


    Das mit der festen Zeilenhöhe ist richtig - darüber könnte ich wohl auch das Problem lösen.
    Da in der Tabelle nur einzeilige Zeilen sind und ich die gerne (bei unterschiedlichen Inhaltsgrößen - z.B. Checkboxen) gleichhoch hätte müsste ich mir an ein paar Stellen noch was einfallen lassen. Grundsätzlich würde es so wohl mit nem Padding in den Zellen funktionieren.


    Code
    1. <meta http-equiv="X-UA-Compatible" content="edge"/>


    hat keinen Unterschied gebracht.


    Grundsätzlich würde ich aber trotzdem gerne Wissen wie man mit dem Kompatibililätsmodus umgeht wenn man IE-Hacks (wie oben) benutzt.
    Der aktuelle IE interpretiert diese dann nicht setzt den Rest der Seite aber so um wie es ein alter IE gemacht hätte?
    Also er ignoriert die *+html-Angaben - interpretiert das Box-Modell aber IE-Old-Style?
    Oder sehe ich das falsch?


    VG
    Olz.

  • Kombatibilitätsmodus brauchst du nicht bei IE grösser Version 8. Der war mal dafür vorgesehen alte Webseiten richtig darzustellen.


    Der obige Code ist der Richtige und der von Microsoft empfohlene Code.


    Du kannst den kompletten Code auch hier rein stellen, es gibt dafür extra Code-Schalter im Editor. Aber bitte HTML komplett und CSS.

  • Die Seite läuft in einem Intranet. Der IE läuft dort im Kompatibilitätsmodus (ist wohl nicht ungewöhnlich für Intranet-Seiten). Kann man natürlich abstellen - kann ich aber nicht beeinflussen.


    => Die Seite wird - sofern man sie im IE/Kompatibilitätsmodus aufruft - mit dem alten IE-Box-Modell angezeigt und ich weiss nicht wie ich dem aktuellen IE sagen soll das er, sofern er im Kompatibilitätsmodus läuft die Zeile 1px flacher anzeigen soll.


    Mit allen nicht IE-Browsern funktioniert alles wie es soll.

  • Mir gehts ja mittlerweile nur noch darum, wie ich speziell dem IE wenn er in Kompaibilitätsmodus läuft was beibringen kann.


    Die Seite läuft mittlerweile zufriedenstellend indem ich das "Box-Modell" mit dem entfernen der Höhe aus dem <tr> entfernt habe.


    Werde aber später oder morgen nochmal den Fall in einem einfachen komplett-Beispiel nachstellen.

  • Habe mal einen Testfall nachgebaut.
    Getestet habe ich mit IE8 und Firefox als Referenz.
    Was immer ich auch für einen Modus gewählt habe im IE8 (Quirks, oder IE8 Standard) war die Höhe der Tabellenfelder gleich. Lediglich im IE7 Standardsmode waren die Tabellenfelder etwas höher als die Vorgabe, aber der IE7 ist eh ausgestorben.



  • - - - Aktualisiert - - -


    Eben erst dein Bsp. gesehen. Vielen dank für die Mühe...
    Verhält sich wie mein Bsp. (habe es in FF und IE11 (mit und ohne Kompatibilitätsmodus getestet)):
    Bei dir wird die Tabelle im K-Modus wohl (3x2)px höher bei mir (5x1)px.
    Da wollte ich irgendwie gegensteuern. Wenn ich bei mir dann 19px angebe passt die Tabelle im K-Modus...

  • Firefox (so sollte es überall aussehen):



    IE-Kompatibilitätsmodus:



    - - - Aktualisiert - - -


    Schon wieder deinen Beitrag übersehen. :-(


    Darum geht es ja gerade. Ich kann nicht sicherstellen, dass einige Benutzer nicht den Kompatibilitätsmodus aktiviert haben. Ist in dem Intranet in dem das Tool läuft evtl. per defaul so eingestellt.


    Vielleicht ist es ja auch gar nicht möglich die Tabelle auch dort wie gewünscht darzustellen - würde mir auch schon als Antwort genügen ;)

  • Noch mal.
    Warum verwendest du den Kompatibilitätsmodus.
    Weisst du wofür der ursprünglich eingeführt wurde?
    Seiten in HTML5 und Standardkonforme Seiten in HTML4 brauchen den Modus nicht. Wird er dennoch verwendet, wird die Darstellung falsch sein.


    Im Zweifel noch mal nachlesen:
    https://de.wikipedia.org/wiki/Kompatibilit%C3%A4tsmodus
    http://windows.microsoft.com/d…mpatibility-view#ie=ie-11


    EDIT als Antwort zu deinem letzten Nachtrag:
    Wenn Personen in eurem Unternehmen den Kompatibilitätsmodus verwenden, dann haben sie eben Pech gehabt. Wenn einer Diesel in seinen Porsche 911 kippt hat er auch Pech gehabt.
    Wenn einer trotz Regen keinen Schirm mit nimmt, dann hat er ....

  • So, mittlerweile hab ichs wohl kapiert. Danke an alle die geholfen haben.


    Mit Kompatibilitätsansincht (IE7, 8, ..., edge) oder ohne.


    Am einfachsten mit edge (allerdings mit "IE=egde" und nicht nur "edge" - deshalb gings erst mal nicht (auch der Code von explanator) - da hab ich ne Weile gebraucht um das zu merken)


    HTML
    1. <meta http-equiv="X-UA-Compatible" content="IE=edge"/>


    Falls man über z. B. "IE=EmulateIE7" geht (ist in meinem Fall wohl auch die default-Einstellung), kommt man mit:


    HTML
    1. <!--[if IE 7]>
    2. <link href="style_ie7.css" type="text/css" rel="stylesheet"/>
    3. <![endif]-->


    weiter.


    Hacks wie:

    HTML
    1. * + html tr {height:18px;}



    funktionieren hier scheinbar nicht.


    Will man auch noch den IE10/11 extra bestylen:


    /* Nur Internet Explorer 10 oder 11 */
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    [hier !]
    }


    Hier nochmal mein Testbeispiel:


    PS. danke auch an die nette Mail-Unterstützung von http://www.css-hack.de/