h1 с нулевым размером в сетке на Firefox - PullRequest
Новая
       16

h1 с нулевым размером в сетке на Firefox

0 голосов
/ 28 октября 2018

Я пытаюсь использовать сетку для отображения моего элемента в заголовке, в браузере Firefox (v 63.0), а также в Chrome (v 70.0.3538.77), и все они отображаются правильно, кромеh1, который каким-то образом сохраняет нулевой размер (но все еще виден, см. скриншот для получения дополнительной информации), несмотря на то, что ячейка достаточно велика для него (я проверил, поместив ее за пределы сетки и проверив ее размер.)

Вот HTML (в pug) 

link(rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous")
link(rel="stylesheet" href="/style/header.css")

header
  h1 3615 MyBlog
  div.innerGrid
      h1 3615 MyBlog
      span.subline Node.js is cool!
      span.admin
          i.fas.fa-cog
          |Administration

и header.css

body{
    margin: 0;
}

header{
    width: 100vw;
    height: 100px;
}

.innerGrid{
    width: 90vw;
    height: 90%;
    display: grid;
    margin: auto;
    grid-template-columns: 200px auto 200px;
    grid-template-rows: 10px 40px 20px 20px auto;
    grid-template-areas:
            ". . ."
            "title . button"
            ". . ."
            "subline . ."
            ". . .";
}

.innerGrid h1{
    grid-area: title;
}

.innerGrid .subline{
    grid-area: subline;
}

.innerGrid .admin{
    grid-area: button;
}

.innerGrid {
  border: 1px solid black;
}

.innerGrid > * {
  border: 1px solid red;
}

И, как вы можете видеть, сублинии и кнопки ведут себя, как ожидалось, но h1вне сетки имеет размер 38,4 пикселя (на моем компьютере), но тот, что в сетке, имеет размер 0 пикселей (и ячейка, в которой он должен быть, имеет размер 40 пикселей, что явно превышает 38,4 пикселей).

edit: добавление скриншота и границ в css, чтобы показать проблему

screenshot to show the problem

Спасибо за вашу помощь.

1 Ответ

0 голосов
/ 28 октября 2018

Скорее всего, проблема связана с тем, что h1 имеет маржу по умолчанию, установленную браузером, и, следовательно, не ведет себя так, как ваш диапазон, в котором его нет.Обычной практикой является сброс поля и отступа по умолчанию, см. эту ссылку .В вашем случае вы также можете просто сбросить поле для этого конкретного элемента, например так: 

.innerGrid h1 {
    margin: 0;
}
...