Высота дочернего элемента кнопки в Safari отличается от высоты Chrome - PullRequest
Новая
       117

Высота дочернего элемента кнопки в Safari отличается от высоты Chrome

1 голос
/ 06 августа 2020

Я пытаюсь закодировать одноколоночную навигацию во всю высоту, используя элементы кнопки равной высоты с дочерними элементами для стилизации. Это отлично работает в Chrome и Firefox, но не в Safari / Webkit. Пример здесь:

https://codepen.io/mattsims/pen/BaKyNye

<div class="columns">

  <div class="column">

    <div class="navigation">
      <div class="navigation-outer">
        <div class="navigation-inner">

          <button class="navigation-button reset">
            <span class="icon-button-outer">
              <span class="icon-button-inner">
                <span class="content">Button</span>
              </span>
            </span>
          </button>

          <button href="#" class="navigation-button reset">
            <span class="icon-button-outer">
              <span class="icon-button-inner">
                <span class="content">Button</span>
              </span>
            </span>
          </button>

          <button href="#" class="navigation-button reset">
            <span class="icon-button-outer">
              <span class="icon-button-inner">
                <span class="content">Button</span>
              </span>
            </span>
          </button>

          <button href="#" class="navigation-button reset">
            <span class="icon-button-outer">
              <span class="icon-button-inner">
                <span class="content">Button</span>
              </span>
            </span>
          </button>

        </div><!-- /navigation-inner -->
      </div><!-- /navigation-outer -->
    </div><!-- /navigation -->

  </div><!-- /column -->

</div><!-- /columns -->

(см. Ссылку Codepen выше для CSS)

Как продемонстрировано, использование якорей вместо кнопок решает проблему, но, поскольку это должно использоваться в SPA, кнопки являются обязательными / предпочтительными.

Любая помощь, которая не даст мне вырвать последние волосы, будет очень значительной оценен!

...