Safari中的引导列+垂直选项卡受到干扰

Question

首先，我不（也很高兴）拥有 Apple 的任何东西。 但这也让我面临一个问题，现在用 Apple 的 Safari 浏览器查看新网站时似乎无法正确显示。有在线工具可以在不同的浏览器和操作系统中查看网站，但很难找到问题所在。所以我希望这里有人对这个问题有任何经验并且知道如何解决这个问题。

这张图片是我的一位客户发送的

但它应该看起来像 (https://torza.nl/portfolio_torza.php)

我认为这是一个css 问题。这是tabscss

.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）。