Проблемы с сеткой CSS в IE 11 - PullRequest
Новая
       17

Проблемы с сеткой CSS в IE 11

0 голосов
/ 24 июня 2019

Я создал сетку стиля кладки в HTML / CSS. Для этого я использовал

display: свойства сетки с 'grid-row' и 'grid-column.'

См. Прилагаемое перо.

Это прекрасно работает в Chrome, Firefox и Edge, еще не пробовал в Safari, но, к сожалению, есть проблемы при рендеринге в браузере IE 11. Вместо того, чтобы получить красивый макет сетки, как показано на прилагаемой ручке, он просто отображает 4 столбца 1x1 друг над другом.

Существуют ли какие-либо специфические свойства IE, которые я могу назначить своим классам CSS, чтобы они правильно отображались во всех браузерах? 

#container {
  display:inline-block;
  overflow: hidden;            /* clip the excess when child gets bigger than parent */
}
#container img {
  display: block;
  transition: transform .4s;   /* smoother zoom */
}
#container:hover img {
  transform: scale(1.3);
  transform-origin: 50% 50%;
}
.wrapper {
display: grid;
grid-gap: 0px;
grid-template-columns: 33% 33% 33%;
grid-template-rows: 400px 400px;
color: #000;
}

.a {
grid-column: 1;
grid-row: 1/3;
text-align:center;
color:#fff;
display:block;
position:relative;
overflow:hidden;
}

.b {
grid-column: 2 / span 2;
grid-row: 1;
color:#fff;
position:relative;
overflow:hidden;
}

.c { 
grid-column: 2;
grid-row: 2;
color:#fff;
position:relative;
overflow:hidden;
}

.d { 
grid-column: 3;
grid-row: 2;
color:#fff;
position:relative;
overflow:hidden;
}



.box {
border-radius: 0px;
padding: 10px;
font-size: 150%; 
display:block;
position:relative;
}

.ctr {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) 
}
  
 .imex-btn {
  background-color: #4080fa;
  border: none;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-top: 70px;
  cursor: pointer;
  font-family: "Century Gothic";
 }

.imex-btn:hover {
background-color: #000;
color: #4080fa;
}
    
    
<div class="wrapper">
  <div class="box a">
    <div id="container">
    <img id="image" src="https://via.placeholder.com/500x900
C/O https://placeholder.com/">
    <div class="ctr"><h2 class="white">BOX A<h2>
</div>
<a href="#" class="ctr imex-btn">VIEW NOW</a>
    </div>
  </div>
  <div class="box b">
    <div id="container">
    <img id="image" src="https://via.placeholder.com/1200x900/C/O https://placeholder.com/">
   <div class="ctr"><h2 class="white">BOX B</h2>
</div>
<a href="#" class="ctr imex-btn">VIEW NOW</a>
   </div>
  </div>
   <div class="box c">
    <div id="container">
    <img id="image" src="https://via.placeholder.com/500x500
C/O https://placeholder.com/">
    <div class="ctr"><h2 class="white" style="text-align:center">BOX C</h2>
</div>
<a href="#" class="ctr imex-btn">READ MORE</a>
    </div>
  </div>
   <div class="box d">
    <div id="container">
    <img id="image" src="https://via.placeholder.com/500x500
C/O https://placeholder.com/">
    <div class="ctr"><h2 class="white" style="text-align:center">BOX D</h2>
</div>
<a href="#" class="ctr imex-btn">READ MORE</a>
    </div>
  </div>

  
</div>

Ответы [ 3 ]

1 голос
/ 24 июня 2019

Некоторые элементы неправильно отображаются в IE11 из-за их реализации стандартов.Попробуйте добавить префикс -ms- к таким элементам, как display: grid, grid-column и grid-row.

Вероятно, вы столкнетесь с такими же проблемами при тестировании на старых версиях Safari (в этом случае попробуйтепрефикс -webkit).

1 голос
/ 25 июня 2019

Я добавил немного CSS, чтобы он работал в IE. Обратите внимание на префикс -ms-, добавленный в css. Вы также можете обратиться к этой статье , в которой объясняется, как поддерживать CSS-сетку в IE. 

#container {
            display: inline-block;
            overflow: hidden; /* clip the excess when child gets bigger than parent */
        }

            #container img {
                display: block;
                transition: transform .4s; /* smoother zoom */
            }

            #container:hover img {
                transform: scale(1.3);
                transform-origin: 50% 50%;
            }

        .wrapper {
            display: -ms-grid;
            display: grid;
            grid-gap: 0px;
            grid-template-columns: 33% 33% 33%;
            -ms-grid-columns: 33% 33% 33%;
            grid-template-rows: 400px 400px;
            -ms-grid-rows: 400px 400px;
            color: #000;
        }

        .a {
            grid-column: 1;
            grid-row: 1/3;
            -ms-grid-column: 1;
            -ms-grid-row-span: 2;
            text-align: center;
            color: #fff;
            display: block;
            position: relative;
            overflow: hidden;
        }

        .b {
            grid-column: 2 / span 2;
            grid-row: 1;
            -ms-grid-row:1;
            -ms-grid-column-span: 2;
            -ms-grid-column:2;
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .c {
            grid-column: 2;
            grid-row: 2;
            -ms-grid-column:2;
            -ms-grid-row:2;
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .d {
            grid-column: 3;
            grid-row: 2;
            -ms-grid-column:3;
            -ms-grid-row:2;
            color: #fff;
            position: relative;
            overflow: hidden;
        }



        .box {
            border-radius: 0px;
            padding: 10px;
            font-size: 150%;
            display: block;
            position: relative;
        }

        .ctr {
            margin: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%)
        }

        .imex-btn {
            background-color: #4080fa;
            border: none;
            color: white;
            padding: 10px 30px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin-top: 70px;
            cursor: pointer;
            font-family: "Century Gothic";
        }

            .imex-btn:hover {
                background-color: #000;
                color: #4080fa;
            }
<div class="wrapper">
        <div class="box a">
            <div id="container">
                <img id="image" src="https://via.placeholder.com/500x900
C/O https://placeholder.com/">
                <div class="ctr">
                    <h2 class="white">BOX A</h2>
                </div>
                <a href="#" class="ctr imex-btn">VIEW NOW</a>
            </div>
        </div>
        <div class="box b">
            <div id="container">
                <img id="image" src="https://via.placeholder.com/1200x900/C/O https://placeholder.com/">
                <div class="ctr">
                    <h2 class="white">BOX B</h2>
                </div>
                <a href="#" class="ctr imex-btn">VIEW NOW</a>
            </div>
        </div>
        <div class="box c">
            <div id="container">
                <img id="image" src="https://via.placeholder.com/500x500
C/O https://placeholder.com/">
                <div class="ctr">
                    <h2 class="white" style="text-align:center">BOX C</h2>
                </div>
                <a href="#" class="ctr imex-btn">READ MORE</a>
            </div>
        </div>
        <div class="box d">
            <div id="container">
                <img id="image" src="https://via.placeholder.com/500x500
C/O https://placeholder.com/">
                <div class="ctr">
                    <h2 class="white" style="text-align:center">BOX D</h2>
                </div>
                <a href="#" class="ctr imex-btn">READ MORE</a>
            </div>
        </div>
    </div>
1 голос
/ 24 июня 2019

Попробуйте изменить CSS с

Сетка-шаблон-столбцы: 33% 33% 33%;

К

grid-template-columns: 1fr 1fr 1fr;

...