Bootstrap Safari 中的列 + 垂直标签受到干扰

Question

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

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

但它应该看起来像 (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）。

Bootstrap Safari 中的列 + 垂直标签受到干扰

Bootstrap column + vertical tabs in Safari is disturbed

html

css

safari

twitter-bootstrap