Раздел MID выровнен по верхнему краю в Internet Explorer 11 на моем компьютере - с использованием как вашего текущего CSS, так и того, что было изначально опубликовано.
Однако вокруг контейнера имеется большое количество отступов, что является побочным продуктом рендеринга браузера.
Поскольку каждый браузер и устройство потенциально могут применять крошечные различия в отображении вещей, может быть чрезвычайно полезно и менее неприятно нормализовать макет перед применением любого собственного стиля.
По большей части Нормализация - это, по сути, практика удаления предустановок браузера и определения начальных значений, чтобы помочь стандартизировать то, как все интерпретируется впоследствии.
Вот мой личный, normalize.css ...
/* ┌─────────────────────────────────────────────────────────────────┐
/* │ Normalize v1.1 │
/* │ Created by Dustin Halstead │
/* └─────────────────────────────────────────────────────────────────┘
/* ┌────────────────────────────────────────────────────────────────┐
/* │ Universal Adjustments │
/* 1. Correct line height in all browsers. */
/* 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. */
* {
padding: 0;
margin: 0;
border: 0;
border-collapse: collapse;
vertical-align: baseline;
border-spacing: 0;
text-decoration: none;
line-height: 1.15; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* └────────────────────────────────────────────────────────────────┘
/* ┌────────────────────────────────────────────────────────────────┐
/* │ Sections │
/* Correct display in IE 9-. */
article, aside, footer, header, nav, section, figcaption, figure, main { display: block; }
/* Correct `h1` font size and margin within `section` and `article` areas in Chrome, Firefox, and Safari. */
h1 { font-size: 2em; margin: 0.67em 0; }
/* └────────────────────────────────────────────────────────────────┘
/* ┌────────────────────────────────────────────────────────────────┐
/* │ Grouping │
/* 1. Correct box sizing in Firefox. */
/* 2. Show overflow in Edge and IE. */
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/* 1. Correct inheritance and scaling of font size in all browsers. */
/* 2. Correct odd `em` font sizing in all browsers. */
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* └────────────────────────────────────────────────────────────────┘
/* ┌────────────────────────────────────────────────────────────────┐
/* │ Text │
/* 1. Remove the gray background on active links in IE 10. */
/* 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/* Correct font weight in Chrome, Edge, and Safari. */
b, strong { font-weight: bolder; }
/* Correct the scaling and odd `em` font sizing in all browsers. */
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
/* Correct font style in Android 4.3-. */
dfn { font-style: italic; }
/* Correct font size in all browsers. */
small { font-size: 80%; }
/* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
/* └────────────────────────────────────────────────────────────────┘
/* ┌────────────────────────────────────────────────────────────────┐
/* │ Embedded Content │
/* Add the correct display in iOS 4-7. */
audio:not([controls]) { display: none; height: 0; }
/* Hide overflow in IE. */
svg:not(:root) { overflow: hidden; }
/* └────────────────────────────────────────────────────────────────┘
/* ┌────────────────────────────────────────────────────────────────┐
/* │ Forms │
/* Remove the margin in Firefox and Safari. */
button, input, optgroup, select, textarea { margin: 0; }
/* Remove the inheritance of text transform in Edge, Firefox, and IE. */
button, select { text-transform: none; }
/* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4. */
/* 2. Correct the inability to style clickable types in iOS and Safari. */
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/* Correct the text wrapping in Edge and IE. */
legend { box-sizing: border-box; display: table; max-width: 100%; white-space: normal; }
/* Remove the default vertical scrollbar in IE. */
textarea { overflow: auto; }
/* Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
/* Correct the odd appearance in Chrome and Safari. */
[type="search"] { -webkit-appearance: textfield; }
/* Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
/* Correct the inability to style clickable types in iOS and Safari. */
::-webkit-file-upload-button { -webkit-appearance: button; }
/* └────────────────────────────────────────────────────────────────┘
/* ┌────────────────────────────────────────────────────────────────┐
/* │ Interactive │
/* Correct display in Edge, IE, and Firefox. */
details, menu { display: block; }
/* Correct display in all browsers. */
summary { display: list-item; }
/* └────────────────────────────────────────────────────────────────┘
/* ┌────────────────────────────────────────────────────────────────┐
/* │ Miscellaneous │
/* Correct display in IE 9-. */
canvas { display: inline-block; }
/* Correct display in IE. */
template { display: none; }
/* Correct display in IE 10-. */
[hidden] { display: none; }
/* └────────────────────────────────────────────────────────────────┘
Попробуйте и посмотрите, поможет ли это улучшить то, что вы видите.
Надеюсь, это пригодится.
Обновлять:
Стало понятно, что макет ломался во время изменения размера браузера больше, чем при первоначальном рендеринге.
Проблема, по-видимому, является прямым результатом включения: display:-ms-grid;
... а также нескольких ошибок позиционирования.
Кроме того, необходимо определить display: flex;, чтобы контент правильно перемещался в указанном div.
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
min-width: 270px;
background:cyan;
display: grid;
-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-ms-grid-rows: 1fr 1fr 1fr;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: minmax(auto, auto);
}
.top {
min-height: 8em;
background: pink;
-ms-grid-column: 1;
-ms-grid-column-span: 12;
-ms-grid-row: 1;
grid-column: 1 / span 12;
grid-row: 1;
}
.mid {
min-height: 10em;
background: yellow;
-ms-grid-column: 1;
-ms-grid-column-span: 12;
-ms-grid-row: 2;
grid-column: 1 / span 12;
grid-row: 2;
display: flex;
}
.bottom {
min-height: 5em;
background: purple;
-ms-grid-column: 1;
-ms-grid-row: 3;
-ms-grid-column-span: 12;
grid-row: 3;
grid-column: 1 / span 12;
}
person
Dustin Halstead
schedule
27.06.2018
height: 100%в контейнере. Это может быть причиной проблемы. Некоторым браузерам по-прежнему требуется определенная высота для родительского элемента, чтобы процентная высота работала для дочернего элемента. Либо добавьтеheight: 100%к элементамhtmlиbody, либо переключитесь наheight: 100vhв контейнере. Подробности здесь и здесь. - person Michael Benjamin schedule 27.06.2018