0
Ich habe eine Site über Dreamweaver erstellt, die reaktionsschnell sein soll. Als ich in Chrome und Firefox getestet habe, funktioniert es gut, aber als ich es in IE11 getestet habe, funktioniert es nicht so gut wie erwartet. Aus irgendeinem Grund hat IE11 Probleme beim Anpassen des Textes. Das Layout sieht ungefähr so aus:Das Material-Grid meiner Site funktioniert nicht in IE11
Es gibt ein Eltern-Div mit zwei Child-Divs (eins für Bild und ein anderes für Text). Abhängig von der Zeilenposition befindet sich das Bild entweder rechts oder links und ist auf 50% der Breite eingestellt.
Die maximale Breite des Gitterbehälters 1280px und jedes Bild, mit Ausnahme des Banners ist 640 x 800.
I des Fluid grid CSS meist Standard verlassen haben (in Dreamweaver). Ich habe zwei Versionen der Seite gemacht (index und index2) und beide haben das gleiche Problem.
Hier ist der div in Index
<div class="over480">
\t \t \t <!-- Technology Section -->
\t <div class="divHomeContent" id="fhTech">
\t <div class="hcImg1">
\t <a href="tech.html"><img src="images/thumbs/tech_btn.jpg" alt="" border="0"/></a>
</div>
<div class="hcTxt1">
\t <span class="spnCont">Developing the next generation products for control systems and power supply</span>
</div>
</div>
<!-- End Technology Section -->
<!-- Project Engineering Section -->
\t <div class="divHomeContent" id="fhPE">
<div class="hcTxt2">
\t Delivering world-class engineering solutions through power generation expertise.
</div>
\t <div class="hcImg2">
\t <a href="pe.html"><img src="images/thumbs/pe_btn.jpg" alt="" border="0"/></a>
</div>
</div>
<!-- End Project Engineering Section -->
<!-- Marketing & Sales Support Section -->
<div class="divHomeContent" id="fhMkt">
\t <div class="hcImg1">
\t <a href="mkt.html"><img src="images/thumbs/ms_btn.jpg" alt="" border="0"/></a>
</div>
<div class="hcTxt1">
\t Enhancing Product awareness across the region and help sales win through effective customer engagement.
</div>
</div>
<!-- End Marketing & Sales Support Section -->
<!-- Supply Chain Section -->
<div class="divHomeContent" id="fhSC">
<div class="hcTxt2">
\t The Control Tower - ensuring delivery of products whenever and wherever customers need them.
</div>
\t <div class="hcImg2">
\t <a href="sc.html"><img src="images/thumbs/sc_btn.jpg" alt="" border="0"/></a>
</div>
</div>
<!-- End Supply Chain Section -->
<!-- Lifecycle Services Section -->
<div class="divHomeContent" id="fhLS">
\t <div class="hcImg1">
\t <a href="ls.html"><img src="images/thumbs/ls_btn.jpg" alt="" border="0"/></a>
</div>
<div class="hcTxt1">
\t Best-In-Class technical support and services that solve our customers’ toughest problems.
</div>
</div>
<!-- End Lifecycle Services Section -->Und hier sind die CSS-Codes:
/*
/*
* HTML5 ✰ Boilerplate v3.0.2
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*
* Detailed information about this CSS: h5bp.com/css
*
* Dreamweaver modifications:
* 1. Commented out selection highlight
* 2. Removed media queries section (we add our own in a separate file)
*
* ==|== normalize ==========================================================
*/
/* =============================================================================
HTML5 display definitions
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
Base
========================================================================== */
/*
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
*/
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; background-color: #e5e5e5; font-family: Arial; color: #595858; }
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
*/
/* Dreamweaver: uncomment these if you do want to customize the selection highlight
*::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
*::selection { background: #fe57a1; color: #fff; text-shadow: none; }
*/
/* =============================================================================
Links
========================================================================== */
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
Typography
========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
Lists
========================================================================== */
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
Embedded content
========================================================================== */
/*
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
*/
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
/*
* Correct overflow not hidden in IE9
*/
svg:not(:root) { overflow: hidden; }
/* =============================================================================
Figures
========================================================================== */
figure { margin: 0; }
/* =============================================================================
Forms
========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
/*
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
*/
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
/*
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
*/
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
/*
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
*/
button, input { line-height: normal; }
/*
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
* 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
*/
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
/*
* Re-set default cursor for disabled elements
*/
button[disabled], input[disabled] { cursor: default; }
/*
* Consistent box sizing and appearance
*/
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
/*
* Remove inner padding and border in FF3/4: h5bp.com/l
*/
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
/*
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
*/
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* =============================================================================
Tables
========================================================================== */
/*
* 'border-collapse: collapse;' needs to be overridden in designs having tables with rounded corners and drop shadows.
*/
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* =============================================================================
Chrome Frame Prompt
========================================================================== */
.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
/* ==|== primary styles =====================================================
Author:
========================================================================== */
/* ==|== non-semantic helper classes ========================================
Please define your styles before this section.
========================================================================== */
/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/* ==|== print styles =======================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
/* =============================================================================
Extra Styles
========================================================================== */
.gridContainer {
\t background-color: #fff;
}
footer {
\t color: #909090;
\t margin-top: 60px;
}
.divExtras .ex-ico {
\t /*width: 50px;
\t height: 50px;*/
\t margin-left: auto;
\t margin-right: auto;
}
.divExtras {
\t width: 100%;
\t color: #fff;
\t padding-top: 40px;
\t text-align: center;
}
.divExtras td {
\t width: 20%;
\t text-align: center;
\t padding: 10px;
}
.divC001 {
\t /*display: table;*/
\t width: inherit;
\t border: 0px solid black;
\t position: relative;
}
.divC002 {
\t /*display: table;*/
\t width: inherit;
\t border: 0px solid red;
\t position: relative; \t
}
.imgHome {
\t position: relative;
}
#divH002 {
\t z-index: 0;
}
/*#fhTech .hcImg1 {
\t position: relative;
\t top: -30px;
\t z-index: 1;
}
#fhPE .hcImg2 {
\t position: relative;
\t top: -60px;
\t z-index: 2;
}
#fhMkt .hcImg1 {
\t position: relative;
\t top: -90px;
\t z-index: 3;
}
#fhSC .hcImg2 {
\t position: relative;
\t top: -120px;
\t z-index: 4;
}
#fhLS .hcImg1 {
\t position: relative;
\t top: -150px;
\t z-index: 5;
}*/
.divExtras {
\t font-size: 0.9em;
}
.divHomeContent {
\t border: none;
\t clear:both;
\t display: flex;
\t overflow: hidden;
\t max-width: 1280px;
\t flex-flow: row;
}
.divHomeContent div.hcImg1 {
\t float: left;
\t width: 50%;
\t border: none;
\t max-width: 640px;
}
.divHomeContent div.hcTxt1 {
\t padding-left: 50px;
\t padding-right: 20px;
\t border: none;
\t max-width: 570px;
\t overflow: hidden;
\t flex: 1;
\t height: inherit;
\t border: none;
\t display: flex;
\t flex-direction: column;
\t justify-content: center;
\t align-items: center;
}
.divHomeContent div.hcImg2 {
\t width: 50%;
\t border: none;
\t overflow: hidden;
\t max-width: 640px;
}
.divHomeContent div.hcTxt2 {
\t padding-left: 20px;
\t padding-right: 50px;
\t border: none;
\t float: left;
\t width: 100%;
\t max-width: 570px;
\t flex: 1;
\t word-wrap: break-word;
\t height: inherit;
\t border: none;
\t display: flex;
\t flex-direction: column;
\t justify-content: center;
}
.spnCont {
\t display: inline-block;
\t vertical-align: middle;
}In Firefox und Chrome, der respon sive design funktioniert wie erwartet: Die Texte werden vertikal ausgerichtet und der Wortumbruch passt sich gut an, sodass die beiden Kind-divs nebeneinander liegen.
Allerdings bleiben die Texte im IE11 vertikal oben und die Divs, deren Textteil auf der linken Seite ist, scheinen ihren Text nicht zu umbrechen und scheinen über die maximale Breite hinauszugehen, die ich gesetzt habe. Infolgedessen geht das Recht-div, das das Bild beherbergt, nach unten.
Bitte helfen :(
Möchten Sie flexbox verwenden? Müssen Sie IE unterstützen? Hier - https://github.com/philipwalton/flexbugs. Lies das zuerst. :) –