Safari列与Firefox和Chrome不同

Question

我正在使用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>

Answer 1

如果没有看到完整生成的html，很难说是否是问题的原因，但//不是CSS中的有效评论。你需要使用：

/* width: 80%; */