Html 为什么我的网站在chrome和firefox中的外观与在Safari中使用flexbox时的不同？
我不熟悉HTML和CSS，对两者都有非常基本的了解。我正在创建一个测试网站，其中一部分使用了Treehouse的教程。我想使用flexbox进行布局。我已经创建了这个网站，看起来我希望它在智能手机上显示，它是一列，但当它移动到iPad屏幕上时，我希望底部的列变成两列，在桌面或mbpro屏幕上，我希望所有三列都显示出来 在chrome和firefox中，我的网站看起来正是我想要的。然而，在Safari中，该网站看起来并不正确。蓝色的横幅在桌面上向左偏移，底部的列为3列，但不相称。第一根柱子很大，最后两根柱子很细 我希望有人能帮我找到正确的方向。我已经学习HTML和CSS好几个星期了，还不太精通。上周末，我第一次了解了flexbox。我希望最后一页是一个关于智能手机的专栏。然后在iPad上，我希望顶部的菜单在一列中，蓝色丝带中的公司名称和时间等居中。然后将底部柱拆分为2个，底部1个。然后在iPad Pro或桌面屏幕上，我希望与iPad相同，只是最后一列分成3个相等的空格 正如我所说的，目前我的chrome和firefox正是我想要的，只有Safari不能正常工作 下面是HTMLHtml 为什么我的网站在chrome和firefox中的外观与在Safari中使用flexbox时的不同？,html,css,flexbox,Html,Css,Flexbox,我不熟悉HTML和CSS，对两者都有非常基本的了解。我正在创建一个测试网站，其中一部分使用了Treehouse的教程。我想使用flexbox进行布局。我已经创建了这个网站，看起来我希望它在智能手机上显示，它是一列，但当它移动到iPad屏幕上时，我希望底部的列变成两列，在桌面或mbpro屏幕上，我希望所有三列都显示出来 在chrome和firefox中，我的网站看起来正是我想要的。然而，在Safari中，该网站看起来并不正确。蓝色的横幅在桌面上向左偏移，底部的列为3列，但不相称。第一根柱子很大，最
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Name of Company</title>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/oilChangeStyles.css">
<div id="fb-root">
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</div>
</head>
<body>
<header class="main-header">
<h1 class="name"><a href="#">Name of business</a></h1>
<ul class="main-nav">
<li><a href="#">Oil changes</a></li>
<li><a href="#">Trans flush</a></li>
<li><a href="#">Trans tune ups</a></li>
<li><a href="#">Coolant Services</a></li>
<li><a href="#">4x4 services</a></li>
<li><a href="#">Air filters</a></li>
</ul><!-- .main-nav -->
</header><!-- .main-header -->
<div class="banner">
<div class="left-side col">
<a href="tel:800-800-8000">(800) 800-8000</a><br />
<a href="https://google.com" target="_blank">1000 West Columbia Blvd<br />
Ste 100<br />
Dearborn<br /> MI 45885</a>
</div><!-- .left-side -->
<div class="center col">
<h1 class="headline">Company name</h1>
<span class="tagline">"Your one stop shop for all your auto needs."</span><br />
</div><!-- center col -->
<div class="right-side col">
Mon 8:30 am - 6:30 pm<br />
Tue 8:30 am - 6:30 pm<br />
Wed 8:30 am - 6:30 pm<br />
Thu 8:30 am - 6:30 pm<br />
Fri 8:30 am - 6:30 pm<br />
Sat 8:30 am - 5:00 pm<br />
Sun Closed<br />
</div><!-- right-side col -->
</div><!--/.banner-->
<div class="pictures">
<img class="item-1" src="img/frontOfBusiness.png" alt="Front of Business">
<img class="item-2" src="img/logo.png" alt="Logo">
<!-- <img class="item-3" src="img/interiorBay.png" alt="The interior bay"> -->
</div><!-- .pictures -->
<div class="row">
<div class="primary col">
<h2>Welcome!</h2>
<p>At Company name we pride ourselves in customer service and are always willing to go the extra mile to make our customers happy. Drop-ins are always welcome for our wide variety of auto care services. Stop in anytime and talk to our friendly techs about the top notch servicing we provide at a great price. Here at the 1 stop, EVERY SINGLE customer is valued and important to us.
请注意，所有主要浏览器都支持flexbox 一些最新的浏览器版本，如Safari 8和IE10，需要。这似乎是你所缺少的
要快速添加所需的所有前缀，请在左侧面板中发布CSS：。到Safari，您需要编写-webkit flex；到IE 10-11，您需要编写-ms flex
您可以在此处阅读有关flex的更多信息：每个浏览器都有自己的属性，默认情况下为元素定义，因此首先您需要制定标准…您是新来的。许多人建议我也使用bootstrap。尝试
显示：-webkit flex</div><!--/.primary col-->
<div class="secondary col">
<h3>We offer:</h3>
<ul>
<li>10 Minute Oil Changes</li>
<li>Transmission Services</li>
<li>Coolant Services</li>
<li>4x4 Servicing</li>
<li>Power Steering Servicing</li>
<li>Replacement of Air Filters, Wiper Blades & Light Bulbs</li>
<li>Additive Services</li>
</ul>
</div><!-- end .secondary col -->
<div class="third col">
<h3>Our specials include:</h3>
<ul>
<li>Everyday $19.95 oil change (up to 5qts, 5-30 and 10-30 weight only, standard canister oil filters only internals have fees)</li>
<li>$69.95-$89.95 Transmission Service - beats any competitors price! </li>
<li>$5 off any Valvoline Maxlife change</li>
<li>$10 off any Valvoline Syn power change</li>
<li>Multi-Service layered discounts, so the more services you combine, the more you save!</li>
</ul>
</div><!-- end .third col-->
</div><!-- end .row -->
<footer class="main-footer">
<div class="fb-like" data-href="https://www.facebook.com/pages/Company name" data-width="50px" data-layout="button_count" data-action="like" data-show-faces="true" data-s hare="true"></div>
<div class="footer-inner">
<span>©2016 Oil Change.</span>
</div>
</footer>
/* =================================
Base Element Styles
==================================== */
* {
box-sizing: border-box;
}
body {
font-family: 'Varela Round', sans-serif;
line-height: 1.6;
color: #3a3a3a;
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
p {
font-size: .95em;
}
h2,
h3,
a {
color: #093a58;
}
h1,
h2,
h3 {
margin-top: 0;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
/* =================================
Base Layout Styles
==================================== */
/* ---- Navigation ---- */
.name {
font-size: 1.35em;
margin: 0;
}
.main-nav {
margin-top: 5px;
}
.name a,
.main-nav a {
text-align: center;
display: block;
padding: 10px 15px;
}
.main-nav a {
font-size: .95em;
color: #243432;
text-transform: uppercase;
}
.main-nav a:hover {
color: #91aab6;
}
/* ---- Layout Containers ---- */
.main-header {
padding-top: .35em;
padding-bottom: .35em;
}
.banner,
.main-footer {
text-align: center;
}
.banner {
color: #fff;
background: #130897;
padding: 1em 0;
margin-bottom: 24px;
}
.col {
padding-right: 1em;
padding-left: 1em;
}
.main-footer {
background: #130897;
padding: 2em 0;
margin-top: 30px;
}
/* ---- Page Elements ---- */
.item-1,
.item-2,
.item-3 {
width: auto;
margin-top: 8px;
margin-left: 20px;
box-shadow: 10px 10px 5px #000;
}
.headline {
margin-bottom: 0;
}
.feat-img {
border-radius: 5px;
}
.footer-inner {
color: #fff;
}
.col h2 {
margin-top: 20px;
}
.col h3 {
color: white;
}
.tagline {
margin-top: 10px;
font-style: italic;
}
.left-side a {
color: white;
}
.left-side a:hover {
color: red;
}
.map {
float: left;
margin-left: 150px;
}
.secondary h3,
.third h3 {
color: black;
}
.secondary ul,
.third ul {
list-style: disc;
margin-left: 20px;
padding-left: 20px;
}
.row {
padding-top: 30px;
}
.fb-like {
padding-bottom: 20px;
}
/* =================================
Media Queries
==================================== */
@media (min-width: 769px) {
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main-header,
.row,
.footer-inner{
width: 80%;
margin: 0 auto;
max-width: 1150px;
}
.tagline {
font-size: 1.4em;
}
.pictures {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
width: auto;
}
.row {
display: flex;
}
.main-header,
.main-nav,
.banner {
display: flex;
}
/*
.main-header {
flex-direction: column;
align-items: center;
}
/*
.banner {
flex-direction: column;
align-items: center;
flex-wrap: wrap;
flex-grow: 1;
}
*/
/*
.col {
flex: 1 100%;
justify-content: space-between;
}
*/
}
@media (min-width: 880px) {
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.col {
flex: 1 50%;
justify-content: space-between;
}
@media (min-width: 1025px) {
.main-header {
flex-direction: row;
justify-content: space-between;
}
.col {
flex: 1 33%;
justify-content: space-between;
}
}
*/