Safari 栏目不同于 Firefox 和 Chrome答案

【问题标题】：Safari columns are different from Firefox and ChromeSafari 栏目不同于 Firefox 和 Chrome
【发布时间】：2016-11-27 17:17:36
【问题描述】：

我正在使用 Bootstrap 构建网站。

该网站在 Chrome 和 Firefox 上看起来不错。

但是当我在 Safari 上打开我的网站时，那里的列要长得多，所以我在那个页面上看到了一个巨大的空白。

在这里你可以看到 Chrome 和 Safari 的区别。

左边是 Safari |正确的是 Chrome

这是我用于列的 HTML 和 CSS：

对于列，我使用标准引导 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>

【问题讨论】：

请在此处包含图片和代码，我们无需离开。无论如何，如果您不想依赖浏览器如何解释样式表，您将需要特定的“如果此浏览器，请执行此操作”。截至 2016 年 10 月，大约 3.6% 的互联网用户使用 Safari。此外，差异很小，因此您可能需要重新考虑甚至考虑一下。如果你真的必须深入研究它，祝你好运。 -- w3schools.com/browsers
浏览器有不同的默认样式表。如果您希望到处都具有相同的外观，则需要覆盖 CSS 中的所有默认值。

标签： javascript html css twitter-bootstrap google-chrome

【解决方案1】：

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

/* width: 80%; */

【讨论】：