Darstellungsproblem im IE?!

mONe1

Grünschnabel
Hallo zusammen,
ich bastle gerade eine Webseite. Auf den gängigen Browsern (Chrome, Firefox, InternetExplorer11, Edge) passt alles, allerdings gibts z. B. im InternetExplorer im Kompatibilitätsmodus (InternetExplorer8) das Problem, dass er ganz was anderes anzeigt. Die borderbox ist total verschoben und wird ganz wo anders angezeigt.
Gibts da irgendeinen Trick, wo ich nur dieses Problem beheben kann ohne alles ändern zu müssen?
Quasi ne kleine Abfrage, falls IE8 dann mach das....


Wäre super, wenn mir hier jemand weiterhelfen könnte.

LG Simone



HTML:
<div id="container">

    <div class="backgrounds">
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
     </div>

    <div class="column">
       <h2>Weinseminar für Einsteiger <br /></h2>
       <h4>20.1/24.2/31.3.2017</h4>
        <p>TEXT</p> 
     </div> 
   
  <br /> <br />
  
   <div class="column">
       <h2>Weinseminar für Profis <br /></h2>
       <h4>20.1/24.2/31.3.2017</h4>
        <p>TEXT</p> 
     </div> 

     <br /> <br />

    <div class="column">
       <h2>Weinseminar für den Rest <br /></h2>
       <h4>20.1/24.2/31.3.2017</h4>
       <p>TEXT</p> 
     </div> 

  <div style="clear:both;"></div>
</div>

CSS:
div { box-sizing:border-box; -moz-box-sizing:border-box; }

/* column container */
#container { 
    margin:0 -2.1666%;
    position:relative; 
}

/* column layout */
.column { 
    position:relative; 
    float:left; 
    width:95%; 
    margin:0 2.1666%;  
    padding:1.0em; 
    color:#5e5e5e;
}

.column h4{
    font-style:italic; font-size:1em; color:#C0C0C0; margin:0 0 0.5em 0;
    }

.column h2{
    text-decoration:underline;color:#C0C0C0;
    }
.column p {
    color:#C0C0C0;
    }


/* background container */
.backgrounds { 
    position:absolute;
    width:100%;
    height:100%;
}

/* background columns */
.backgrounds .column {
    height:100%;
    background: #5e5e5e; 
    border-radius:10px;
}
 

Anhänge

  • anzeigerichtig.jpg
    anzeigerichtig.jpg
    127,4 KB · Aufrufe: 3
  • anzeigefalsch.jpg
    anzeigefalsch.jpg
    31,8 KB · Aufrufe: 3
Gibts da irgendeinen Trick, wo ich nur dieses Problem beheben kann ohne alles ändern zu müssen?
Quasi ne kleine Abfrage, falls IE8 dann mach das....
... genau sowas gibt's tatsächlich, und nennt sich Conditional Comments :)
Als noch IE5.x und IE6 am Start, und die unangefochtenen Platzhirschen unter den Browsern waren, wurde ihnen auf diesem Wege ie7.js eingeflößt, damit sie sich standardkonform verhalten, und dem W3C folgen, wie HTML und CSS zu interpretieren sind.

Das eingebundene JavaScript erschlug mit einer Klatsche all ihre Bugs (soweit ich mich recht erinnere, irgendwas zwischen 20 u. 30, oder ein bischen darüber hinaus), und erübrigte endlich das mühselige Abarbeiten der langen Liste an CSS-Hacks/-Workarounds - je nach Komplexität des CSS-Konzepts :cool:

In der Folge gab's dann ie8.js für IE7 (+ IE6, IE5.x), und ie9.js für IE8 (+ IE7, IE6, IE5.5).
Heutzutage ist HTML5 Shiv in aller Munde.
Es berücksichtigt auch die lange überholten Versionen von Safari 4.x und Firefox 3.x.

Auch CSS-Frameworks wie Bootstrap setzen darauf, und binden es neben ihrer eigenen Projektseite in allen Demo-/Vorlageseiten ein, damit in den betagten IE-Versionen frischer CSS3-Wind aufkommt :D
HTML:
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

[edit]Tipp-Ex[/edit]
 
Zuletzt bearbeitet:
Ich danke dir recht herzlich für diesen ausführlichen Post..... :) werd mich da mal einlesen.
Teile gerne meine langjährigen Erfahrungen im WebDesign/-Development :)

Und bei diesem speziellen Thema, das seinerzeit aus den geschilderten Gründen für viel Wirbel in der Developer-Community gesorgt hat, kamen gestern in mir viele Erinnerungen und Emotionen hoch, denen ich freien Lauf gelassen habe, anstatt mich, wie sonst üblich, kurz zu fassen :D
 
Zurück