Safari列與Firefox和Chrome不同

-1

我正在使用Bootstrap構建網站。Safari列與Firefox和Chrome不同

該網站在Chrome和Firefox上看起來不錯。

但是，當我在Safari上打開我的網站時，這些列在那裏更長，所以我在該頁面上獲得了巨大的空白區域。

在這裏您可以看到Chrome和Safari之間的區別。

Left is Safari |右邊是鍍鉻

enter image description here

這是我的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; 
 
\t -webkit-column-break-inside: avoid; 
 
    min-height: 1px; 
 
}

<div class="container tipsDetails desktop"> 
 
\t <div class="row"> 
 
\t \t <div class="image img-responsive"><img src="<?php echo $image2[0]; ?>"></div> 
 
\t \t <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> 
 
\t \t <div class="col-md-12 col-sm-12 title"><?php the_title();?></div> 
 
\t \t <div class=" " style="width:75%; margin:0 auto;"> 
 
\t \t \t \t \t <div class="col-md-12 col-sm-12 content" id="tipsContent"><?php the_content(); ?></div> \t 
 
\t \t \t \t \t <div class="col-md-12 col-sm-12 content" id="content2" style="display:none;"></div> 
 
\t \t </div>

來源

2016-11-24 hans kazan

請包括圖片和代碼在這裏沒有我們需要離開SO。無論如何，如果你不想依賴於瀏覽器如何解釋樣式表，你需要特定的「如果這個瀏覽器，做到這一點」。截至2016年10月，約有3.6％的互聯網用戶使用Safari。此外，差異很小，所以你可能想重新考慮甚至給予這一點。祝你好運，如果你真的需要挖掘它。 - http://www.w3schools.com/browsers/ – Jonast92

瀏覽器有不同的默認樣式表。如果你想在任何地方看到相同的外觀，你需要覆蓋CSS中的所有默認值。 – Barmar

很難說，如果這是你的問題的原因沒有看到完整的生成html，但//不是CSS有效的評論。您需要使用：

/* width: 80%; */

來源

2016-11-27 09:17:36

Safari列與Firefox和Chrome不同

回答

相關問題