Bootstrap столбец + вертикальные вкладки в Safari нарушены

Question

Для начала, я не имею (и рад этому) ничего от Apple. Но это также сталкивается со мной, теперь кажется, что новый веб-сайт отображается неправильно при просмотре через браузер Apple Safari. В Интернете есть инструменты для просмотра веб-сайтов в разных браузерах и ОС, но тогда трудно найти проблему. Поэтому я надеюсь, что у кого-то здесь есть опыт решения этой проблемы и он знает, как решить эту проблему.

Это изображение было отправлено одним из моих клиентов

Но это должно выглядеть (https://torza.nl/portfolio_torza.php)

Я думаю, что это проблема css. Это tabs css

.ui-tabs-vertical {
    width: 75em; 
}

.ui-tabs-vertical .ui-tabs-nav {
    padding: .2em .1em .2em .2em;
    float: left;
    width: 12.5em;
}

.ui-tabs-vertical .ui-tabs-nav li {
    clear: left; width: 100%;
    border-bottom-width: 1px !important;
    border-right-width: 0 !important;
    margin: 0 -1px .2em 0;
    border-radius: 4px;
}

.ui-tabs-vertical .ui-tabs-nav li a {
    display:block; }

.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
    padding-bottom: 0;
    padding-right: .1em;
    border-right-width: 1px;
}

.ui-tabs-vertical .ui-tabs-panel {
    padding: 1em;
    float: right;
}

.ui-tabs .ui-tabs-nav {
    background:#FFFFFF !important;
    border: none;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
  padding-left: 2px !important;
  width: 100% !important;
}

Я пытался удалить class d-flex, потому что это было проблемой на другой странице того же сайта. Но это не было решением.

Страница

  <div class="col-lg-12 about-content">

    <div id="tabs" style="border: none;">

      <div class="row">
          <div class="col-lg-2">
              <ul>

                <?php foreach($menu_array as $menu){ $i++; echo '<li><small><a href="#tabs-'.$i.'"><span style="display:inline-block; width:155px;">'.$menu[1].' '.$menu[2].'</span></a></small></li>'; } ?>

              </ul>
          </div>

          <div class="col-lg-10">

             <?php foreach($menu_array as $menu) { $j++; echo '<div id="tabs-'.$j.'">';

                $title = $menu[2];

                include('includes/header_portfolio_torza_web.php');

                if(file_exists('includes/portfolio_torza/page_'.$menu[0].'.php')) { include('includes/portfolio_torza/page_'.$menu[0].'.php'); }
                else { include('includes/portfolio_torza/page_00.php'); }

                include('includes/footer_portfolio_torza_web.php');

                echo '</div>';
             }
             ?>

         </div>

    </div>

  </div>

Одна из включенных страниц:

<div class="row">

    <?php
    if($title == '') { echo '<div class="col-lg-12 d-flex flex-column justify-content-center"><h1 class="text-center">'.$pdf_title.'</h1></div>'; }
    ?>

    <div class="col-lg-12 d-flex flex-column justify-content-center">

        <p class="description" style="font-size: 14px;">
        Tegenwoordig versturen veel bedrijven online nieuwsbrieven naar hun klanten en werknemers. Deze nieuwsbrieven informeren lezers over updates binnen het bedrijf en leveren informatie die eraan verbonden is. Bovendien spelen nieuwsbrieven een rol in het opbouwen en in stand houden van de relaties met klanten<br >
        <br />
        In het Torza systeem is het mogelijk om elke aangemaakte contactpersoon direct toe te voegen aan een externe nieuwsbriefservice, zoals Mailchimp.
        </p>

    </div>

</div>

Answer 1

Хорошо, прошло уже некоторое время с тех пор, как я использовал Bootstrap, но, если у вас есть возможность редактировать разметку, измените <div class="col-lg-10"> на <div class="col-lg-10" style="margin-right:-1px;">

Это решает это для меня (с помощью devtools).