неожидаемое поведение при :hover — css css3

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
Загрузка...

Вопрос:


Начал изучать grid в css. столкнулся с непонятной ситуацией
https://codepen.io/AkDF03/pen/gewWJY

<html>
    <head>
        <style>
        .grid {display: grid;}
        .menu {grid-template-columns: repeat(4, 1fr);}
        .menu .item span:hover {border-bottom: 2px solid #f26c4f;}
        .item a:hover { border-bottom: 2px solid #f26c4f;}
        .data {margin-top: 10px;}
        .body {grid-template-columns: 1fr 2fr;}
        .grid-item {margin-top:20px;}
        tr td {border: 1px solid #000;}
    </style>
</head>
<body>
    <section id="body">
        <div class="container grid">
            <div class="menu grid">
                <div class="item"><a href="#">first</a></div>
                <div class="item"><span>second</span></div>
                <div class="item"><span>third</span></div>
                <div class="item"><span>forth</span></div>
            </div>
            <div class="body grid">
                <div class="grid-item">
                    test item grid
                </div>
                <table class="data grid-item">
                    <tr>
                        <td>row</td> <td>item</td>
                    </tr>
                    <tr>
                        <td>row</td> <td>item</td>
                    </tr>
                </table>
            </div>
        </div>
    </section>
</body>
<html>

при наведении на пункты меню (first, second, etc) увеличивается высота строчек в таблице. Проявляется в мозилле. В хроме такого поведения нет.

Поведение прекращается если:

в стилях таблицы убрать margin-top
убрать у пунктов меню :hover
у .container убрать класс .grid
у .body убрать класс grid 

Это баг в моем коде? или это что-то с самим CSS Grid?

Автор вопроса: Michael

.grid{
  display: grid;
}
 .menu {
  grid-template-columns: repeat(4, 1fr);
}
.menu .item span {
  border-bottom: 2px solid transparent;
}
 .menu .item span:hover {
  border-color: #f26c4f;
}
  .item a:hover {
  border-color: #f26c4f;
}
 .data {
  margin-top: 10px;
}
.body{
  grid-template-columns: 1fr 2fr;
}
.grid-item{
  /*margin-top:20px*/
}

tr td{
  border: 1px solid #000;
}

Источник

Вам также может быть интересно:

Drag and Drop UWP — c# xaml mvvm
Вопрос: Нужно иметь возможность добавлять изображения в приложение путем перетаскивания из файловой системы У Grid включил AllowDrop. Но как добавить перетаскиваемые изображения в коллекцию? Т.к. те ...
Растягивание Высоты , Резина — html css html5
Вопрос: Здравствуйте! Реализовал резиновый дизайн. Растягивается ширина, но длина по % не растягивается. Возможно ли это реализовать? Или так и задумано, растягивание только на ширину ...
Jquery position().left Как быть на мобильниках? — javascript jquery css
Вопрос: На мобильных устройствах, если зумишь экран, position всегда разный. $('g').position().left Как сделать так, чтобы он не менял свои значения? Автор вопроса: ...
Jquery position().left Как быть на мобильниках? — javascript jquery css
Вопрос: На мобильных устройствах, если зумишь экран, position всегда разный. $('g').position().left Как сделать так, чтобы он не менял свои значения? Автор вопроса: ...
requestAnimation и очередность отрисовки — javascript canvas
Вопрос: Здравствуйте! Реализовал 2D игру и в Edge работает все плавно и круто, но в Firefox'e подвисает, сказали, что нужно сделать, чтобы раз-два момент и все ...
Контекстное/всплывающее меню в Android — java android popup
Вопрос: Есть ли техническая возможность сделать приложение, добавляющее свое контекстное или всплывающее меню в любом месте системы? Хочу, чтобы при выделении любого текста появлялась дополнительная кнопка ...
Контекстное/всплывающее меню в Android — java android popup
Вопрос: Есть ли техническая возможность сделать приложение, добавляющее свое контекстное или всплывающее меню в любом месте системы? Хочу, чтобы при выделении любого текста появлялась дополнительная кнопка ...
Завершить службы циклом — c# windows-service
Вопрос: Можно ли остановить службы циклом? У меня есть список служб, занёс их в List List<string> name = new List<string> { "AdobeARMservice", "RemoteRegistry", "TermService", "Messenger", "SSDPSRV", ...
Завершить службы циклом — c# windows-service
Вопрос: Можно ли остановить службы циклом? У меня есть список служб, занёс их в List List<string> name = new List<string> { "AdobeARMservice", "RemoteRegistry", "TermService", "Messenger", "SSDPSRV", ...
RecyclerView — разная разметка — android recyclerview
Вопрос: Смотрел, я смотрел в сторону RecyclerView и наконец решил кинуть ListView и на тебе! В "плохом прошлом" мой ListView использовался для двух разметок. Сейчас я ...
RecyclerView — разная разметка — android recyclerview
Вопрос: Смотрел, я смотрел в сторону RecyclerView и наконец решил кинуть ListView и на тебе! В "плохом прошлом" мой ListView использовался для двух разметок. Сейчас я ...
Как правильно передать массив аргументом для пользовательской функции — php
Вопрос: Если не брать в функцию все это, тогда результат работает. А если вот так в функции все выполнять, тогда PHP ругается: «Invalid ...
Как правильно передать массив аргументом для пользовательской функции — php
Вопрос: Если не брать в функцию все это, тогда результат работает. А если вот так в функции все выполнять, тогда PHP ругается: «Invalid ...
ViewPager внутри ViewPager — такие матрешки работают? — android viewpager
Вопрос: Доброго времени суток. Назрела новая задача. Есть каталог мастеров. При выборе конкретного мастера открывается его страница (активити с ViewPager), и теперь мастеров можно перелистывать свайпом. ...
Почему id всегда 1 Yii2 — yii авторизация
Вопрос: Использую все как по документации. Для получения информации о пользователе использую $identity = $model->findOne(]); И каким бы не был email, id пользователя всегда ...

Оставьте ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *