Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#1 02. Januar 2011 20:13

Tobias_Gl
probiert CMS/ms aus
Ort: Siegen
Registriert: 09. November 2010
Beiträge: 69
Webseite

IE Bugs - Erklärung und Hacks

Vorwort:
Letzte Zeit habe ich mich mit dem yaml Layoutkonzept auseinander setzten müssen. Dort ist ein wichtiger Punkt, dass mögliche Fehler vom IE5.01 - IE7 ausgeschlossen werden. Ich möchte hier einfach einmal dokumentieren welche IE-Bugs bekannt sind und über welche Wege (Hacks) sie wieder bereinigt werden.

Zu Grundlage für diesen Thread liegt das Buch: CSS-Layouts - Praxislösungen mit YAML von Dirk Jesse

P.S. Da dies ein etwas größeres Kapitel ist werde ich dieses Post nach und nach mit allen nötigen Informationen erweitern

1. HasLayout
Der Internet Explorer arbeitet intern nach dem hasLayout Konzept. Dieses Konzept ist dem Layoutkonzept von CSS sehr ähnlich, aber nicht gleich. Somit passieren dank dieser Unterschiede immer wieder Fehler.
Das hasLayout Konzept ist oft der Grund für das auftreten der meisten Float-Bugs, abweichen vom CSS-Box Modell Unterschiede beim positionieren von Hintergrundgrafiken.
Folgende Elemente haben hasLayout automatisch auf true gesetzt:

<html>,<body>
<table>,<th>,<tr>,<td>
<img>
<hr>
<input>,<select>,<textarea>,<button>
<iframe>,<embed>,<object>,<applet>
<marquee>

Sobald man einem Element per CSS folgende Eigenschaft zuweist wird haslayout auch auf true gesetzt:

position:absolut;
float:left | right;
display:inline-block; (ab IE 5.5 verfügbar)
width: beliebiger Wert (außer auto)
height: beliebiger Wert
zoom: beliebiger Wert (proprietäre Eigenschaft)
writing-mode: tb-rl (proprietäre Eigenschaft)

Ab den IE 7.0 werden allen Elemente mit folgenden Werten haslaylout: true zugewiesen:

overflow: hidden | scroll | auto;
position: fixed;
min-height: beliebiger Wert
max-height: beliebiger Wert (außer none)
min-width: beliebiger Wert
max-width: beliebiger Wert (außer none)

Es gibt keine Möglichkeit hasLayout auf false zu setzten, außer man verzichtet auf die oben geschilderten Eigenschaften. Die meisten derzeitigen IE-Hacks basieren darauf diese Eigenschaft zu umgehen ohne einen störenden Nebeneffekt zu erzielen.

2. Guillotine-Bug
Bug bei IE-Version(en): IE 5.05, 5.5, 6
Der Guilotine-Bug ist wohl der häufigste Bug. Wie der Name schon vermuten lässt schneidet dieser Bug Inhaltsbereiche ab, sobald ein Hovereffekt in einem gefloateten Bereich betätigt wird.

Folgende Vorraussetzungen müssen erfüllt sein um diesen Bug auszulösen:

  • Ein statischer Div-Container

  • Ein beliebiges gefloatetes Element in diesem Objekt, welches nicht gecleat wird

  • Links innerhalb des Div Containers welche nach dem geloateten Element liegen.

  • Eine a:hover-Regel

Die a:hover-Regel führt bei jeder Änderungen einer der folgenden Eigenschaften zum Bug:

  • Hintergrund

  • Innenabstand (padding)

  • Textstil (text-syle)

  • Rahmen (border)

Um diesen Fehler entgegen zu wirken sollte ein clearing stattfinden.

Wer diesen Zeilenbruch nicht verwenden kann, kann das clearing auch in einen leeren Div-Tag einbinden. Jedoch wiederspricht dieses der Semantik von (X) HTML.
Alternative Workaround sind nicht bekannt – außer man verzichtet auf :hover Effekte im Internet Explorer mit den oben aufgezählten Eigenschaften

3. IE-Peekaboo-Bug
Bug bei IE-Version(en): IE 5.05, 5/Mac, 5.5, 6
Dieser Bug zeigt gefloatete Inhalte in einem width:auto deklarierten Div-Container falsch an.  Inhalte neben den gefloateten Block werden bei dieser Konstellation gar nicht oder nur teilweise angezeigt.
Erst beim verändern der Fensterbreite oder beim Überfahren von links mit der Maus wird der Text teilweise oder sogar ganz sichtbar.

Eine Möglichkeit diesen Text wieder sichtbar zu machen ist es eine Eigenschaft zu verwenden welche das hasLayout-Konzept auf true setzt. Die wohl einfachste Variante ist:

Dieses Vorgehen ist auch unter Holly-Hack bekannt. Die 1% Deklaration von height hat nur minimale Auswirkung auf das restliche verhalten des Contents.

4. Unscrollable-Content-Bug
Bug bei IE-Version(en): IE 5.05, 5.5, 6
Sobald innerhalb eines relativ positionierten Containers ein absolut positionierter Container eingebunden wird beschneidet der Internet Explorer diesen.
Der absolut positionierte Container wird anfangs richtig dargestellt. Sobald man jedoch die Größe des Browserfensters verändert und diese kleiner als der Container wird erscheint kein Scrollbalken. Der zu herausragende Bereich wird nicht mehr angezeigt und ist somit unbrauchbar.

Beispiel

div#parent {
width:auto;
postion: relative;
…
}
div#child {
position:absolute;
width:200px;
…
}

Der Internet Explorer geht davon aus, dass der äußere Container den inneren umschließt und mitwächst. Jedoch wird der innere durch die absolute Positionierung in eine andere Z-Index Ebene gehoben.
Die Behebung dieses Bugs ist der gleiche bei beim Peekabo Bug. Die IE Interne hasLayout Eigenschaft muss auf true geändert werden. Dieses geschieht durch den Einsatz der oben aufgelisteten CSS Eigenschaften.  Am einfachsten zu verwenden ist:

/* Start hide from IE-Mach \*/
*html #parent {height:1%;} 
/* End hide from IE-Mac */

Beitrag geändert von Tobias_Gl (02. Januar 2011 20:35)

Offline

#2 03. Mai 2011 16:18

anne66
probiert CMS/ms aus
Registriert: 21. April 2011
Beiträge: 54
Webseite

Re: IE Bugs - Erklärung und Hacks

Hi Tobias,
Ich habe genau das Problem, dass ich in einem äußeren Container einen Content-Container habe, in dem wiederum ein Container mit einem embed-Objekt (eine Immobilienliste von Immoscout) sitzt. Irgendwo in den Tipss zu CMSms habe ich dann noch gelesen, dass der Container Im IE und in Chrome wird diese Liste abgeschnitten. Ich habe nun schon verschiedenes ausprobiert - auch deine Tipps von oben, aber es klappt nicht. Ich weiß nicht, ob ich meine stylesheets richtig ausgezeichnet habe, oder was ich falsch mache.
Also die Container sind so formatiert:

#container {
  width: 960px;
  background: #FFF;
  margin: 0 auto;
  border: 2px solid #70a81e;
}

#content {
    padding: 30px 0;
    width: 750px;
    float: left;
}

#footer {
position: relative;
padding-right: 10px;
padding-bottom: 10px;
background: #FFF;
clear: both;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
font-style: normal;
text-indent:10px;
font-weight: normal;
text-decoration: none;
line-height: 15px;
text-align:right;

}

#myframe {
height: 2300px;
/* hier steht eigetnlich 400px, aber damit IE_Nutzer die Liste sehen können, habe ich myframe erst mal verlängert */
width: 730px;
align: top;
}


Irgendeinen Tipp? cry

Offline

#3 03. Mai 2011 17:12

Wurst2008
Gast

Re: IE Bugs - Erklärung und Hacks

Irgendwie scheint sich das Problem mit embed am heutigen Tag zu bündeln.
Schau mal hier:
http://www.cmsmadesimple.de/forum/viewtopic.php?id=715
Evtl. hilft Dir das weiter mit dem embed-Tag.

#4 03. Mai 2011 18:52

nockenfell
Moderator
Ort: Lenzburg, Schweiz
Registriert: 09. November 2010
Beiträge: 2.807
Webseite

Re: IE Bugs - Erklärung und Hacks

Interessant wird es eigentlich erst hier:
http://www.cmsmadesimple.de/forum/viewt … 6687#p6687


[dieser Beitrag wurde mit 100% recycled bits geschrieben]
Mein Blog  /   Diverse Links rund um CMS Made Simple
Module: btAdminer, ToolBox

Offline

#5 03. Mai 2011 18:52

mike-r
CMS/ms-Profi
Registriert: 21. Dezember 2010
Beiträge: 898
Webseite

Re: IE Bugs - Erklärung und Hacks

Tobias_Gl schrieb:

Wer diesen Zeilenbruch nicht verwenden kann, kann das clearing auch in einen leeren Div-Tag einbinden. Jedoch wiederspricht dieses der Semantik von (X) HTML.

Steht das so in dem Buch? Ein BR (weicher Zeilenumbruch im Fliesstext) widerspricht der Semantik eher als ein DIV (semantisch inhaltsfreies Element.)

Anne: neuer Thread dazu wäre besser gewesen, kann man die Seite mal sehen?


Unablässige Tools für's Webdevelopement/ Fehlerfindung: CSS Validierungsservice, Bildschirmlineal, Firebug, Tidy, Deutsche CSS-Referenz

Offline

#6 03. Mai 2011 19:53

anne66
probiert CMS/ms aus
Registriert: 21. April 2011
Beiträge: 54
Webseite

Re: IE Bugs - Erklärung und Hacks

@ wurst2008 und nockenfell - sorry, aber bei den Threads verstehe ich fast nur noch Bahnhof yikes
Aber ich probier's mal mit dem Einbinden des iframe direkt ins html.
@mike-r - sorry, aber mir schien es hier passen und nun weiss ich nicht, ob ich jetzt noch einen neuen Thread aufmachen soll neutral
http://www.roy-immobilien.de/index.php? … ufangebote
Wie gesagt, als Notlösung habe ich das iframe erst mal verlängert. Vielleicht ist auch in einem der Stylesheets noch eine Anweisung, die mit meinen Formatierungen irgendwie kollidiert. Ich habe die Stylesheets, die mit CMSms automatisch instlliert werden, nicht gelöscht.
Weiss jemand von euch, wo #myframe seine Formatierungen herbekommt?
Denn meine Formatierungen werden teilweise ignoriert, teilweise umgesetzt.
Danke aber schon mal euch allen für die Tipps (ich hoffe, ich kann irgendwann einmal etwas zurückgeben)

Schönen Feierabend
Anne

Offline

#7 04. Mai 2011 23:57

mike-r
CMS/ms-Profi
Registriert: 21. Dezember 2010
Beiträge: 898
Webseite

Re: IE Bugs - Erklärung und Hacks

das richtige Stylesheet für myframe hast Du schon gefunden (das oben zitierte). Woanders kommen auch keine regeln her.
Problem wird möglicherweise sein, dass Du nach dem iframe (im Container content) kein Clear gesetzt hast.
Schwer genaueres zu sagen, es scheint ja so jetzt zu funktionieren...

Edit: oh, seh grad es geht nicht, also wie gesagt, dann setz mal ein clear...
Edit2: sieht eher nach Box-model-bug aus, versuch mal testweise den Iframe in der Breite kleiner zu machen, wenn er dann passt, kommen wir dem Problem näher...
Edit3: Wieso ist der footer eigentlich relative? Das ist doch Quatsch an der Stelle.

Beitrag geändert von mike-r (04. Mai 2011 00:06)


Unablässige Tools für's Webdevelopement/ Fehlerfindung: CSS Validierungsservice, Bildschirmlineal, Firebug, Tidy, Deutsche CSS-Referenz

Offline

#8 04. Mai 2011 07:19

anne66
probiert CMS/ms aus
Registriert: 21. April 2011
Beiträge: 54
Webseite

Re: IE Bugs - Erklärung und Hacks

@mike-r
Danke für deinen Tipp, aber ich komme hier nicht weiter, es wird immer unübersichtlicher.
Ich sehe im IE an 2 verschiedenen Rechnern alles richtig - auch der Kunde hat das bestätigt, ebenso für chrome.
Versuche, einen iframe statt embed direkt einzubinden funktionierten nicht, da muss ich mich erst schlau machen.
Die position relative kam über ein Dreamweaver-template zustande, Zitat: "Diese .footer-Regel enthält die Deklaration position:relative. So erhält Internet Explorer 6 die Eigenschaft hasLayout für .footer, damit die clear-Anweisung korrekt ausgeführt wird. Kann entfernt werden, wenn IE6 nicht unterstützt werden muss."
Ich hab's gelassen und ich lasse auch die Seite jetzt erst mal so mit dem stark verlängerten iframe.

Ich danke allen noch mal für eure Tipps.

Bis dann

Offline

#9 04. Mai 2011 10:48

mike-r
CMS/ms-Profi
Registriert: 21. Dezember 2010
Beiträge: 898
Webseite

Re: IE Bugs - Erklärung und Hacks

anne66 schrieb:

Ich sehe im IE an 2 verschiedenen Rechnern alles richtig

Ah ok, in IE 7 und 8 läuft es, im IE6 ist allerdings der Frame unter dem Menü oder manchmal garnicht zu sehen.


Unablässige Tools für's Webdevelopement/ Fehlerfindung: CSS Validierungsservice, Bildschirmlineal, Firebug, Tidy, Deutsche CSS-Referenz

Offline

#10 06. Mai 2011 08:45

anne66
probiert CMS/ms aus
Registriert: 21. April 2011
Beiträge: 54
Webseite

Re: IE Bugs - Erklärung und Hacks

Nun stimmt es wohl auch im IE6 jedenfalls laut netrender http://ipinfo.info/netrenderer/index.php - das content-div war etwas zu breit.
Und die Immoliste ist nun direkt durch ein iframe eingebunden ohne embed.
Nochmals Danke für eure Unterstützung

Offline

#11 30. November 2015 21:16

cyberman
Moderator
Ort: Dohna / Sachsen
Registriert: 13. September 2010
Beiträge: 6.878
Webseite

Re: IE Bugs - Erklärung und Hacks

Status-Update ... ab 12.01.2016 gibt es nur noch Bugfixes und Security releases für den IE 11 (!)

http://blogs.msdn.com/b/ie/archive/2014/08/07/stay-up-to-date-with-internet-explorer.aspx schrieb:

After January 12, 2016, only the most recent version of Internet Explorer available for a supported operating system will receive technical support and security updates. For example, customers using Internet Explorer 8, Internet Explorer 9, or Internet Explorer 10 on Windows 7 SP1 should migrate to Internet Explorer 11 to continue receiving security updates and technical support.

Dies möchte ich zum Anlass nehmen, die Fixierung dieses in Ehren ergrauten Themas zu lösen  big_smile  devil ...

Beitrag geändert von cyberman (01. Dezember 2015 09:55)


1. Wie bekomme ich hier schnelle Hilfe?
2. HowTo: Fehlersuche bei CMS/ms
---
„First they ignore you, then they laugh at you, then they fight you, then you win.“ Mahatma Ghandi

Offline

#12 30. November 2015 22:28

mike-r
CMS/ms-Profi
Registriert: 21. Dezember 2010
Beiträge: 898
Webseite

Re: IE Bugs - Erklärung und Hacks

Das Abtrennen ist wohl langsam an der Zeit, aber nicht der Grund smile

2 Sachen dazu:
- Der Support für Vista endet 2017. Für Vista gibt es IE9. Auf deutsch: die können unter keinen Umständen keine Sicherheitsupdates für IE 9 bringen.

(Berichtige mich wer, wenn ich was übersehen habe)

- Kommerzielle (und teilweise auch private) Webseiten, die auf Support <11 verzichten, schiessen sich unter Umständen selbst ins Knie, da es reichlich Szenarien gibt, wo (zur Verdeutlichung im Extremfall) Leute mit IE6 unterwegs sind und entweder keine Wahl haben (Firmenrichtlinie) oder das so wollen oder es schlicht nicht besser wissen. Solche Leute kann man nicht erziehen; "funktioniert doch".

Mal ganz blöd an den Haaren herbeigezogen: Mir ist eine Firma lieber, die mein Produkt via IE6 findet (und kauft!) als 100 Leute, die mir ein Like auf FB via IE11, Chrome oder Firefox oder sonstwas schenken.

Bonus: ich hab vergangenes Jahr noch diverse IE6 in Firmen gesehen. Warum die kaum in Logs vorkommen? Ganz einfach: die kommen nur einmal und kaufen woanders (also da wo die Seite "funktioniert".).


Unablässige Tools für's Webdevelopement/ Fehlerfindung: CSS Validierungsservice, Bildschirmlineal, Firebug, Tidy, Deutsche CSS-Referenz

Offline

#13 30. November 2015 22:40

cyberman
Moderator
Ort: Dohna / Sachsen
Registriert: 13. September 2010
Beiträge: 6.878
Webseite

Re: IE Bugs - Erklärung und Hacks

Ähmm, war das jetzt ein Votum pro Fixierung  roll ?


1. Wie bekomme ich hier schnelle Hilfe?
2. HowTo: Fehlersuche bei CMS/ms
---
„First they ignore you, then they laugh at you, then they fight you, then you win.“ Mahatma Ghandi

Offline

#14 01. Dezember 2015 23:46

mike-r
CMS/ms-Profi
Registriert: 21. Dezember 2010
Beiträge: 898
Webseite

Re: IE Bugs - Erklärung und Hacks

Beides tongue


Unablässige Tools für's Webdevelopement/ Fehlerfindung: CSS Validierungsservice, Bildschirmlineal, Firebug, Tidy, Deutsche CSS-Referenz

Offline

#15 01. Dezember 2015 09:52

cyberman
Moderator
Ort: Dohna / Sachsen
Registriert: 13. September 2010
Beiträge: 6.878
Webseite

Re: IE Bugs - Erklärung und Hacks

Tatsächlich wink?

Bei mir ist da eigentlich eher angekommen: "Nee, lass mal, da sind noch gefährlich viele IE6 unterwegs ..."

Aber sei es drum - wollen unseren Nutzern ja hier den bestmöglichen Service bieten.


1. Wie bekomme ich hier schnelle Hilfe?
2. HowTo: Fehlersuche bei CMS/ms
---
„First they ignore you, then they laugh at you, then they fight you, then you win.“ Mahatma Ghandi

Offline

#16 01. Dezember 2015 09:53

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.137

Re: IE Bugs - Erklärung und Hacks

ich hab vergangenes Jahr noch diverse IE6 in Firmen gesehen

Schätzungen zu Folge sind das Weltweit ca. 1%
In Deutschland ca. 0,2%
(Quelle? Microsoft!)
Davon sind wiederum einige lediglich Webdesigner, die Seiten testen devil
Von dem was übrig bleibt, zählt mit Sicherheit nur ein Bruchteil zur Zielgruppe.
Und wegen null-komma-null-irgendwas Prozent schalte ich nichtmal den PC ein.
In der Zeit gönn' ich mir lieber einen Kaffee tongue

Es sei denn, der Kunde ist bereit, einen Aufpreis von mindestens zwei Jahresrationen qualitativ hochwertigen und fair gehandelten Kaffee zu zahlen  lol

Offline

#17 01. Dezember 2015 11:44

mike-r
CMS/ms-Profi
Registriert: 21. Dezember 2010
Beiträge: 898
Webseite

Re: IE Bugs - Erklärung und Hacks

cyberman schrieb:

Bei mir ist da eigentlich eher angekommen: "Nee, lass mal, da sind noch gefährlich viele IE6 unterwegs ..."

Ich meinte, dass das Abpinnen an der Zeit war, die Thematik an sich aber trotzdem nicht tot ist.

NaN schrieb:

Schätzungen zu Folge sind das Weltweit ca. 1%
In Deutschland ca. 0,2%

Ich halte nicht viel von solchen Statistiken. Wenn in 'ner Firma mit 100 Angestellten der Chef mit IE6 oder sonstwas komischen rumsurft, dann ist das auch ein Prozent. In dem Falle ein recht gewichtiges.
Ich verwende im Übrigen auch einen (anderen) 1%-Browser. (Gut, der macht keine Probleme, aber soviel zu Statistik)


Unablässige Tools für's Webdevelopement/ Fehlerfindung: CSS Validierungsservice, Bildschirmlineal, Firebug, Tidy, Deutsche CSS-Referenz

Offline

#18 01. Dezember 2015 15:27

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.391

Re: IE Bugs - Erklärung und Hacks

Nur mal so zur Verdeutlichung meines täglichen Leidens, hier der IE-Teil der Browserstatistik eines ansässigen Gymnasiums:
IE-Anteile
Gehen wir mal davon aus, dass es nicht die Schüler mit ihren neuen Laptops sind, dann bleiben nur in die Irre gelaufene Suchtreffer und Eltern der Schüler

IE 6+7+8 = 5% (Was ist der IE ohne Index?)
IE von 0-9 = 10%

Angesichts der Tatsache, dass ein Redesign der Website ansteht, wird mir schlecht...

Offline

#19 01. Dezember 2015 16:14

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.137

Re: IE Bugs - Erklärung und Hacks

Ich hoffe Du stellst denen die Anpassung an alte Browser-Versionen entsprechend in Rechnung. Und zwar für jede einzelne Version.

Cross-Browser Kompatibilität in allen Ehren, aber Support für sechs Generationen Internet Explorer - 15 Jahre Internet! - eine solche Zeitreise will bestimmt keiner unternehmen, sobald er mit dem damit verbundenen Aufwand konfrontiert wird.

Offline

#20 02. Dezember 2015 08:47

cyberman
Moderator
Ort: Dohna / Sachsen
Registriert: 13. September 2010
Beiträge: 6.878
Webseite

Re: IE Bugs - Erklärung und Hacks

mike-r schrieb:

- Der Support für Vista endet 2017. Für Vista gibt es IE9. Auf deutsch: die können unter keinen Umständen keine Sicherheitsupdates für IE 9 bringen.

Ok, ok - überredet.

<neuen Termin in Kalender schreib />


1. Wie bekomme ich hier schnelle Hilfe?
2. HowTo: Fehlersuche bei CMS/ms
---
„First they ignore you, then they laugh at you, then they fight you, then you win.“ Mahatma Ghandi

Offline