Колонки Safari отличаются от Firefox и Chrome

-1

Я создаю сайт, используя Bootstrap.

Веб-сайт отлично выглядит в Chrome и Firefox.

Но когда я открываю свой веб-сайт в Safari, столбцы намного длиннее, поэтому я получаю огромное количество пробелов на этой странице.

Здесь вы можете увидеть разницу между Chrome и Safari.

Слева - Safari | Правильно Chrome

Изображение 284654

Вот мой 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>
  • 0
    Пожалуйста, включите фотографии и код здесь без нас, чтобы оставить ТАК. В любом случае, вам понадобится конкретное «если этот браузер делает это», если вы не хотите полагаться на то, как браузеры интерпретируют таблицы стилей. По состоянию на октябрь 2016 года примерно 3,6% интернет-пользователей используют Safari. Кроме того, разница довольно незначительна, так что вы можете пересмотреть, хотя бы и даете это. Удачи, если вам действительно нужно копаться в этом. - w3schools.com/browsers
  • 0
    Браузеры имеют разные таблицы стилей по умолчанию. Если вы хотите, чтобы везде выглядел одинаково, вам нужно переопределить все значения по умолчанию в вашем CSS.
Теги:
google-chrome

1 ответ

0

Трудно сказать, является ли это причиной вашей проблемы, не видя полностью сгенерированный html, но // не является допустимым комментарием в CSS. Вам необходимо использовать:

/* width: 80%; */

Ещё вопросы

Сообщество Overcoder
Наверх
Меню