IE-Hack mit Kompatibilitätsmodus

Olz

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

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

und

Code

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

<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.

explanator

Zitat von Olz

Code

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

ist falsch

richtig wäre

Code

<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.

Olz

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

<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.

explanator

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.

synaptic

nur mal kurz um auf den threadtitel einzugehen...:
der compat-mode IST bereits der hack.. dafür braucht man keinen^^

Olz

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.

explanator

Dann zeig uns doch einfach mal deinen ganzen Code. Raten können wir in alle Richtungen, aber dann dauert der Thread hier 3 Tage.

Olz

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.

explanator

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.

HTML

<!DOCTYPE HTML>
<html lang="de">
  <head>
  <meta charset="UTF-8">
  <title>test</title>        
  <meta http-equiv="X-UA-Compatible" content="edge"/>
  <style>
    body {margin: 0px; font: 14px/1.1em Arial;}
    table {border-spacing: 2px 2px;margin:0;}
    tr {height: 100px;padding:0px; margin:0px;}
    td {border:solid 1px red; padding:0px;margin:0px;}
  </style>
  </head>
  <body>
    <table>
     <tr>
      <td>1</td>
      <td>hallo</td>
     </tr>
     <tr>
      <td>2</td>
      <td>hallo</td>
     </tr>
     <tr>
      <td>3</td>
      <td>hallo</td>
     </tr>
    </table>
  </body>
</html>

Alles anzeigen

Olz

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
  <style type="text/css">
   html, body {margin:0; padding:0;}   
   body {background-color:#ddd;font-family:Verdana,Arial,Tahoma;font-size:8px;}
   div#test1 {background-color:#222;margin:0;padding:0;}
   div#test2 {background-color:#ccc;height:100px;margin:0;padding:0;width:200px;float:left;}
   div#test3 {background-color:#eee;height:100px;margin:0;padding:0;width:200px;float:left;}
   tr {height:20px;background-color:#fff;}
   td {width:85px;color:#333;padding:0 5px;border-bottom:1px #999 dotted;border-right:1px #999 dotted;}
  </style>
 </head>
 <body>
  <div id="test1">
   <div id="test2">
    1
   </div>
   <div id="test3">
    <table cellspacing="0" cellpadding="0">
     <tr>
      <td>t1</td>
     </tr>
     <tr>
      <td>t2</td>
     </tr>
     <tr>
      <td>t3</td>
     </tr>
     <tr>
      <td>t4</td>
     </tr>
     <tr>
      <td>t5</td>
     </tr>
    </table>
   </div>
  </div>
 </body>
</html>

Alles anzeigen

- - - 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...

explanator

So sieht deine Seite bei mir aus

Du darfst den Kompatibilitätsmodus natürlich nicht erzwingen, denn dann rendert er die Tabelle anders. Liegt auch an den Rändern(border).

Olz

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

explanator

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/de-at/internet…y-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 ....

Olz

Zitat von explanator

Noch mal.
Warum verwendest du den Kompatibilitätsmodus.

Ich sage ja nicht das ich ihn verwenden will oder das es jemand machen soll - nur kommt es eben wohl vor.

explanator

Hier noch mal, was du machen musst und bis jetzt nicht drin hast --> http://www.bennyn.de/programmierung…verhindern.html

Olz

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

<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

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

weiter.

Hacks wie:

HTML

* + 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:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <!--<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>-->
  <!--<meta http-equiv="X-UA-Compatible" content="IE=edge"/>-->
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
  <style type="text/css">
   html, body {margin:0; padding:0;}   
   body {background-color:#ddd;font-family:Verdana,Arial,Tahoma;font-size:8px;}
   div#test1 {background-color:#222;margin:0;padding:0;}
   div#test2 {background-color:#ccc;height:100px;margin:0;padding:0;width:200px;float:left;}
   div#test3 {background-color:#eee;height:100px;margin:0;padding:0;width:200px;float:left;}
   tr {height:20px;background-color:#fff;}
   td {width:85px;color:#333;padding:0 5px;border-bottom:1px #999 dotted;border-right:1px #999 dotted;}
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { div#test2 {background-color:#0f0;} } // nur zum testen
   * + html tr {height:18px;}
  </style>
  <!--[if IE 7]>
   <link href="style_ie7.css" type="text/css" rel="stylesheet"/>
  <![endif]-->
 </head>
 <body>
  <div id="test1">
   <div id="test2">
    1
   </div>
   <div id="test3">
    <table cellspacing="0" cellpadding="0">
     <tr>
      <td>t1</td>
     </tr>
     <tr>
      <td>t2</td>
     </tr>
     <tr>
      <td>t3</td>
     </tr>
     <tr>
      <td>t4</td>
     </tr>
     <tr>
      <td>t5</td>
     </tr>
    </table>
   </div>
  </div>
 </body>
</html>

Alles anzeigen

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

Tags