Я создаю сайт, используя Bootstrap.
Веб-сайт отлично выглядит в Chrome и Firefox.
Но когда я открываю свой веб-сайт в Safari, столбцы намного длиннее, поэтому я получаю огромное количество пробелов на этой странице.
Здесь вы можете увидеть разницу между Chrome и Safari.
Слева - Safari | Правильно Chrome
Вот мой HTML и CSS, которые я использую для столбца:
Для столбцов я использую стандартный bootstrap CSS.
.tipsDetails .content {
font-family: "H-Lt", sans-serif;
font-size: 16px;
color: #56565a;
// width: 80%;
margin: 0 auto 150px;
column-count: 2;
-webkit-column-break-inside: avoid;
min-height: 1px;
}
<div class="container tipsDetails desktop">
<div class="row">
<div class="image img-responsive"><img src="<?php echo $image2[0]; ?>"></div>
<div class="col-md-12 col-sm-12" style="text-align: center;"><img class="arrow-down2" src="<?php echo get_template_directory_uri();?>/images/arrow_down.png" alt="arrow"/></div>
<div class="col-md-12 col-sm-12 title"><?php the_title();?></div>
<div class=" " style="width:75%; margin:0 auto;">
<div class="col-md-12 col-sm-12 content" id="tipsContent"><?php the_content(); ?></div>
<div class="col-md-12 col-sm-12 content" id="content2" style="display:none;"></div>
</div>
Трудно сказать, является ли это причиной вашей проблемы, не видя полностью сгенерированный html, но //
не является допустимым комментарием в CSS. Вам необходимо использовать:
/* width: 80%; */