Wie gehen Sie mit dem Internet Explorer um?

Lesezeit: 7 Minuten

Benutzer-Avatar
fmsf

Mir ist bewusst, dass es wahrscheinlich noch weitere Fragen zu diesem Thema gibt. Ich denke, dass jeder Webentwickler dies mit IE durchmacht.


Mein Problem:

Ich entwickle eine webbasierte Anwendung, die vollständig auf Javascript basiert. Ich bin ein Mac-Benutzer. Ich war wirklich froh, dass in Safari, Firefox und Opera alles super funktioniert hat. Ich habe dann einen Freund mit Windows gebeten, es mit Internet Explorer zu überprüfen, und die Dinge funktionieren nicht so gut. Meine Anwendung reagiert sehr empfindlich auf die HTML-Standards.

Das Hauptproblem ist das CSS-Layout. Das JavaScript selbst scheint dank jQuery für die Portabilität ordnungsgemäß zu funktionieren.


Meine Frage:

Wie gehen Sie mit dem Internet Explorer um? Soll ich ein neues CSS erstellen, das nur im Internet Explorer geladen wird? Soll ich eine neue Version der Anwendung nur für Internet Explorer erstellen? Wie gehen Sie normalerweise damit um? Die Anwendung ist sowohl im Feature-Design als auch im Layout-Design ziemlich groß.


Bearbeiten:

Die Verwendung des von Nosredna vorgeschlagenen CSS-Resets hat bereits fast die Hälfte der Probleme behoben. Ich denke, es ist wirklich eine gute Praxis. Mir ist aufgefallen, dass SO es auch verwendet.

  • Meine allgemeine Technik beinhaltet viel Fluchen.

    – CookieOfFortune

    29. Mai 2009 um 19:10 Uhr

  • Nichts für ungut, aber hätten Sie bei der Entwicklung der App nicht an den IE denken sollen? Immerhin ist er immer noch der Browser mit dem größten Marktanteil.

    – Tom van Enckevort

    29. Mai 2009 um 19:10 Uhr

  • Ich beschäftige mich mit IE, indem ich Firefox verwende. =)

    – gnovice

    29. Mai 2009 um 19:14 Uhr

  • Wenn Ihre Website “schwer auf HTML” und “alles ruiniert” im IE ist, dann Sie schrieb Ihre Website falsch. Einfach ist wirklich besser.

    – Randolpho

    29. Mai 2009 um 19:20 Uhr

  • @randolpho, Es ist wirklich leicht, ein Durcheinander zu machen, wenn Sie dabei einen der wichtigsten Browser (insbesondere IE) ignorieren. RIAs, die stark auf AJAX basieren, müssen kontinuierlich auf allen Browsern getestet werden, während sie entwickelt werden. Und wenn Sie den IE im Quirks-Modus belassen, arbeiten Sie mit zwei verschiedenen Box-Modellen.

    – Nosredna

    29. Mai 2009 um 19:37 Uhr

Benutzer-Avatar
Nosredna

Geben Sie einen gültigen Dokumenttyp an? Sie können den Internet Explorer etwas kompatibler machen, indem Sie ihn in den Standardmodus schalten. http://msdn.microsoft.com/en-us/library/bb250395.aspx#cssenhancements_topic2

Verwenden Sie eine CSS-Datei zum Zurücksetzen des Browsers? Das kann helfen, die Versionen zusammenzubringen. http://meyerweb.com/eric/tools/css/reset/

Beachten Sie die CSS-Fehler des IE: http://www.positioniseverything.net/explorer.html

Erwägen Sie für das Gerüst Ihres Layouts die Verwendung von Markup, das bekanntermaßen funktioniert, wie z http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts oder http://960.gs/ für flüssige bzw. feste Layouts.

Bleiben Sie mit JavaScript-Unterschieden zwischen Browsern auf dem Laufenden. jQuery verarbeitet einige davon, aber nicht alle. http://www.impressivewebs.com/7-javascript-differences-between-firefox-ie/

Ja, IE ist ein Schmerz. Wenn Sie möchten, dass es im IE funktioniert, sollten Sie wirklich alle paar Tage im IE testen. Du willst den Schmerz nicht für das Ende aufsparen – du willst die Alpträume einen nach dem anderen bewältigen.


Übrigens, wenn Sie denken, dass IE ein Problem ist, versuchen Sie, Ihre Seite mit einem Mobiltelefon anzusehen. Neulich ging ich mit einem iPhone zu REI.com und das mittlere Fünftel oder mehr des Bildschirms wurde von einem Haufen verstümmelter Markups eingenommen, die als Text gerendert wurden.

  • Sry, aber was ist eine Browser-Reset-CSS-Datei? und welchen Doctype schlagen Sie vor, damit IE mehr in die Standards aufgenommen wird?

    – fmsf

    29. Mai 2009 um 19:30 Uhr

  • Doctype-Info: msdn.microsoft.com/en-us/library/… ein CSS-Reset (es gibt viele): meyerweb.com/eric/tools/css/reset

    – Nosredna

    29. Mai 2009 um 19:33 Uhr

  • Du wirst bald die richtige Antwort bekommen 🙂 ty, ich schaue nur, ob weitere Antworten auftauchen

    – fmsf

    29. Mai 2009 um 19:57 Uhr

Bedingte Kommentare.

<!--[if IE 6]>
  <link rel="stylesheet" href="https://stackoverflow.com/questions/927626/ie6.css">
<![endif]-->
<!--[if IE 7]>
  <link rel="stylesheet" href="ie7.css">
<![endif]-->
<!--[if IE 8]>
  <link rel="stylesheet" href="ie8.css">
<![endif]-->
<!--[if !IE]-->
  <link rel="stylesheet" href="normal.css">
<!--[endif]-->

In den IE-Dateien können Sie verwenden @import importieren normal.cssund überschreiben Sie dann die Stile nach Bedarf.

  • Es wäre wahrscheinlich schneller für die Ladezeiten, einfach die normal.css zuerst und für überall zu verlinken und dann darunter die bedingten Kommentare für andere Browser, die bei Bedarf überschrieben werden.

    – Kzqai

    17. Oktober 2009 um 4:51 Uhr

Benutzer-Avatar
Matthias Brunmeier

In erster Linie warte ich nicht, bis das Projekt abgeschlossen ist, um die Browserkompatibilität zu berücksichtigen.

Meistens gibt es bei CSS-Problemen Möglichkeiten, Dinge zu tun, für die keine browserspezifischen Stylesheets geladen werden müssen, daher versuche ich, diese Lösungen zu verwenden, wo immer dies möglich ist. Wenn beispielsweise die meisten Ihrer Probleme mit Box-Modellproblemen zusammenhängen, können Dinge wie die Verwendung von verschachtelten Divs anstelle von Padding helfen, sicherzustellen, dass alles korrekt aussieht, ohne dass separate Stylesheets und Vorlagen für verschiedene Browser erforderlich sind.

Hier ist, wie ich versuche, den Schmerz im Umgang mit IE zu reduzieren:

  1. Verwenden Sie eine reset.css – Yahoo! YUI-Reset oder Eric Meyers CSS zurücksetzen
  2. Seien Sie vorsichtig mit Floats und Clears – sie verursachen normalerweise eine Menge Flüche.
  3. Beachten Sie hasLayout-Bugs im IE, normalerweise hilft das Hinzufügen eines zoom: 1- oder height-Attributs, dies zu beheben. Lesen Über Layout haben.
  4. Sorgen Sie dafür, dass das Layout in Firefox, Safari, Chrome usw. funktioniert, während Sie den IE auf etwa 80 % des Weges dorthin beibehalten.
  5. Implementieren Sie einen IE6.css-Stil und einen IE7.css-Stil, falls erforderlich, indem Sie bedingte Kommentare verwenden.
  6. Bier, Spirituosen oder andere Getränke für Erwachsene.

  • großartige Webseite, die browsershots.org

    – fmsf

    29. Mai 2009 um 19:35 Uhr

  • Interessante Bemerkung … Domäne für Link in Antwort wurde absorbiert? Versuche es jetzt anzuklicken XD Aber was kann man in 4 Jahren erwarten? Ich würde jedoch für alle Fälle immer noch aktualisieren / entfernen, da ich nur eine andere Person war, die über diese Frage gestolpert ist und beschlossen hat, herumzuklicken.

    – Chris Cirefice

    8. Oktober 2013 um 0:05 Uhr

  • Entfernter Link ist jetzt nicht mehr verfügbar. Danke Chris Cirefice.

    – Teilbestellung

    10. Oktober 2013 um 11:53 Uhr

Benutzer-Avatar
Sander Marschall

Zuerst lesen Über Layout haben, die erklärt, wie die IE-Rendering-Engine intern funktioniert. Die Rendering-Engine von IE stammt aus der Zeit vor CSS. Es unterscheidet nicht richtig zwischen Inline- und Blockelementen, wie Sie es erwarten würden. Stattdessen hat im IE ein Element hasLayout. Oder nicht. Dies ist die Quelle von 99 % der IE-CSS-Fehler. Also, lesen Sie diesen Artikel ein paar Mal.

Was Korrekturen betrifft, verwende ich normalerweise bedingte Kommentare. Mehrere Gründe:

  • Sie sind im Gegensatz zu CSS-Hacks zukunftssicher. Was ist, wenn IE9 den Hack behebt, aber nicht den Fehler, den Sie damit lösen möchten?
  • Es ist gültiges (X)HTML (bedingte Kommentare sind nur einfache Kommentare für alle anderen)
  • Es erfordert kein Javascript. Sie werden erstaunt sein, wie viele Leute Javascript deaktiviert haben.

Eine Anmerkung zu bedingten Kommentaren: Verwenden Sie niemals eine Übereinstimmung mit offenem Ende. Das heißt, tun Sie niemals etwas wie:

<!--[if IE]> <load css> <![endif]-->
<!--[if gte IE 7]> <load css> <![endif]-->

Der Grund ist derselbe wie bei Hacks: Machen Sie es zukunftssicher. Was ist, wenn die nächste Version von IE den Fehler behebt und Sie die Korrekturen nicht mehr benötigen? Oder noch schlimmer, der “Fix” bringt Ihr Layout in der neuen IE-Version jetzt tatsächlich durcheinander? Normalerweise ist es am besten anzunehmen, dass die nächste Version von IE den Fehler behoben hat, den Sie umgehen. Ich habe ein bisschen geschrieben darüber damals, als IE 8 am Horizont war.

Benutzer-Avatar
JoshFinnie

Ich denke, es wäre in Ordnung, eine spezielle CSS-Datei für IE zu schreiben. Ich weiß, es ist mühsam, aber aufgrund einiger Positionierungsprobleme sieht IE6 anders aus als alle anderen Browser.

Verwenden Sie diese Zeile für Ihre neu erstellte CSS-Datei:

<!--[if ie6]><link rel="stylesheet" type="text/css" media="screen" href="https://stackoverflow.com/questions/927626/ie6_style.css" /><![endif]--> 

Benutzer-Avatar
Ian G

Mit IE immer rund 65 % des Verkehrsich glaube nicht, dass Sie es als nachträglichen Gedanken betrachten können.

  • Das Problem ist, dass so viele Webentwickler Macs oder Linux verwenden. Wenn Microsoft IE für Mac und Linux hätte, würden Websites im IE meiner Meinung nach besser aussehen.

    – Nosredna

    29. Mai 2009 um 19:41 Uhr

1178900cookie-checkWie gehen Sie mit dem Internet Explorer um?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy