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

195

19 марта 2018, 23:32

Начал изучать 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?

Answer 1

.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;
}