zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden css Flexbox mit IE 10

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.08.2018, 13:51
Benutzerbild von wandler
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.01.2006
Beiträge: 48
wandler befindet sich auf einem aufstrebenden Ast
Standard css Flexbox mit IE 10

Hallo,

irgendwie will der IE 10 Flexbox nicht korrekt darstellen.

Hier mal mein Code:
HTML-Code:
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Flexbox ab IE 10</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
body {
	font: 1em sans-serif;
	padding: 0;
	margin: 0;
	color: #333;
	background: #e2e3e5;
}
.seitenbreite {
	max-width: 63em;
	padding: 0;
	margin: 0 auto;
}

section .seitenbreite #content {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}
section .seitenbreite #content #inhalt {
	background: #0F0; /* Grün */
	-ms-flex: 1;
	-webkit-flex: 1;
	flex: 1;
	-webkit-order: 2;
	-ms-flex-order: 2;
	order: 2;
}
section .seitenbreite #content #navi {
	background: #FF9; /* Gelb */
	min-width: 14em;
	-webkit-order: 1;
	-ms-flex-order: 1;
	order: 1;
}

@media screen and (max-width: 781px) {
	section .seitenbreite #content {
		width: 100%;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	section .seitenbreite #content #inhalt {
		width: 100%;
		-ms-flex-order: 1;
		-webkit-order: 1;
		order: 1;
		background: #0Ce; /* Blau */
		color: #009;
	}
	section .seitenbreite #content #navi {
		min-width: none;
		width: 100%;
		-ms-flex-order: 2;
		-webkit-order: 2;
		order: 2;
		background: #C9C; /* Lilla */
	}
}
</style>
</head>
<body>

<section>
  <div class="seitenbreite">
    <div id="content">
      <div id="inhalt">
        <h1>Content</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor accumsan enim, id finibus sapien imperdiet
        a. Ut laoreet imperdiet diam quis tincidunt. Fusce risus est, suscipit ut turpis id, vehicula sodales libero.
        -Nulla a elementum risus. Morbi fringilla, ligula ac pretium bibendum, felis erat consequat nunc, in blandit
        velit quam eu eros. Nam convallis in sem eu mollis. Mauris venenatis magna vulputate odio aliquet, sit amet
        dapibus tortor luctus. In mauris massa, aliquet nec nisl ut, feugiat tincidunt dolor. Mauris tristique felis eu
        tempus vestibulum. Nulla fringilla molestie consequat. Pellentesque eget porta urna.</p>
      </div><!-- Ende inhalt -->
      <div id="navi">
        <ul>
          <li><a href="#">Seite 1</a></li>
          <li><a href="#">Seite 2</a></li>
          <li><a href="#">Seite 3</a></li>
          <li><a href="#">Seite 4</a></li>
          <li><a href="#">Seite 5</a></li>
          <li><a href="#">Seite 6</a></li>
          <li><a href="#">Seite 7</a></li>
          <li><a href="#">Seite 8</a></li>
          <li><a href="#">Seite 9</a></li>
        </ul>
      </div><!-- Ende navi -->
    </div><!-- Ende content -->
  </div><!-- Ende seitenbreite -->
</section>

</body>
</html>
In der Desktop Ansicht funktioniert alles so wie es soll. Wird das Display beim Internet-Explorer 10 kleiner, überlagert sich die Bereiche. Zudem wird die Hintergrundfarbe (Blau) nicht dargestellt!
In moderne Browser funktioniert das alles wie gewünscht, möchte den Code aber ab IE10 kompatibel haben.
Wer kann mir hier helfen?
Vielen Dank vorab.
__________________
Coden ist keine Esoterik, also lasst uns an eurem Wissen teilhaben ihr Gurus
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.08.2018, 14:57
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 142
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Die IE's waren und sind schon immer etwas 'eigen'... selbst IE 11 unterstützt Flex-Box nur bedingt.
Habe jetzt leider keinen Rechner mit IE 10 zur Verfügung, aber ich erinnere mich wage, dass man bei älteren Versionen des IE mit dem CSS- Format
HTML-Code:
display: table;
vor dem display: flex;
und
HTML-Code:
display: table-cell;
bei den Flex Elementen zumindest etwas richten konnte.
Ansonsten hilft vielleicht eine Browserweiche - allerdings geht das auch nur für IE älter als 10.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.08.2018, 15:25
Benutzerbild von wandler
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.01.2006
Beiträge: 48
wandler befindet sich auf einem aufstrebenden Ast
Standard

Hallo Sailor56,
ja tatsächlich, so wird es jetzt im IE 10 und 11 korrekt angezeigt.

Vielen Dank
__________________
Coden ist keine Esoterik, also lasst uns an eurem Wissen teilhaben ihr Gurus
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
Einbindung von frei erhältlichen Scripten - CSS Problem DonL CSS 1 22.01.2011 17:09
MYspace mehr als nur CSS oder ? Vinceone CSS 0 12.07.2007 03:21
Eric Meyer's CSS Petty Ressourcen 0 21.11.2005 09:18
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 12:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:09 Uhr.