Safari与Chrome中的格式化
Safari与Chrome中的格式化
提问于 2018-06-20 16:44:45
我正在使用这个模板构建这个网站。
在chrome和edge中，服务块看起来是正确的：
在safari中，行是混乱的：
我不是这方面的专家。我只是个自由职业者试着做每件事..。四处张望，找不到这个问题的根源。下面粘贴了index.html和style.css代码。
index.html报头
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Velodu - Market Research & Consulting</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.png">
<!-- Template CSS Files -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/skins/purple.css" />
<!-- Revolution Slider CSS Files -->
<link rel="stylesheet" type="text/css" href="js/plugins/revolution/css/settings.css" />
<link rel="stylesheet" type="text/css" href="js/plugins/revolution/css/layers.css" />
<link rel="stylesheet" type="text/css" href="js/plugins/revolution/css/navigation.css" />
<!-- Template JS Files -->
<script type="text/javascript" src="js/modernizr.js"></script>
</head>index.html中的“服务”代码
<!-- About Section Starts -->
<section id="about" class="about">
<!-- Container Starts -->
<div class="container">
<!-- Main Heading Starts -->
<div class="text-center top-text">
<h1><span>About</span> Us</h1>
<h4>Who We Are</h4>
</div>
<!-- Main Heading Ends -->
<!-- Divider Starts -->
<div class="divider text-center">
<span class="outer-line"></span>
<span class="fa fa-user" aria-hidden="true"></span>
<span class="outer-line"></span>
</div>
<!-- Divider Ends -->
<!-- About Content Starts -->
<div class="row about-content">
<div class="col-sm-12 col-md-12 col-lg-6 about-left-side">
<p>Business keeps moving faster, so nobody has time for slow agencies who add complexity.</p>
<p>We deliver high-quality, high-velocity market research and consulting services because we are great at identifying and removing bottlenecks, especially when the bottleneck is us.</p>
<a class="custom-button scroll-to-target" href="#services">Our Services</a>
<div>
<p><br /></p>
<a style="color:#795DB4" target="_blank" href="https://www.linkedin.com/in/garypansino/">Founder's LinkedIn Profile</a>
</div>
</div>
<div class="col-md-12 col-lg-6 about-right-side">
<div class="full-image-container hovered">
<img class="img-fluid d-none d-md-block" src="img/about.jpg" alt="">
<div class="full-image-overlay">
<h3>Why <strong>Choose Us</strong></h3>
<ul class="list-why-choose-us">
<li>Diverse experience across tech, CPG, retail, etc.</li>
<li>Deep knowledge of research methodologies</li>
<li>Strategic business lens</li>
<li>Leverage the latest tools and tech</li>
</ul>
</div>
</div>
</div>
</div>
<!-- About Content Ends -->
</div>
<!-- Container Ends -->
</section>
<!-- About Section Ends --> <!-- Services Section Starts -->
<section id="services" class="services">
<!-- Container Starts -->
<div class="container">
<!-- Main Heading Starts -->
<div class="text-center top-text">
<h1><span>Our</span> Services</h1>
<h4>What We Do</h4>
</div>
<!-- Main Heading Starts -->
<!-- Divider Starts -->
<div class="divider text-center">
<span class="outer-line"></span>
<span class="fa fa-cogs" aria-hidden="true"></span>
<span class="outer-line"></span>
</div>
<!-- Divider Ends -->
<!-- Services Starts -->
<div class="row services-box">
<!-- Service Item Starts -->
<div class="col-lg-4 col-md-6 col-sm-12 services-box-item">
<!-- Service Item Cover Starts -->
<span class="services-box-item-cover fa fa-bar-chart" data-headline="Quantitative Research"></span>
<!-- Service Item Cover Ends -->
<!-- Service Item Content Starts -->
<div class="services-box-item-content fa fa-bar-chart">
<h2>Quantitative Research</h2>
<p>Of course we do surveys. Concept tests, attitude and usage studies, pricing studies, brand tracking ... the list is long. We do them better because of our advanced programming, and dashboarding skills that complement our deep methodological knowledge.</p>
</div>
<!-- Service Item Content Ends -->
</div>
<!-- Service Item Ends -->
<!-- Service Item Starts -->
<div class="col-lg-4 col-md-6 col-sm-12 services-box-item">
<!-- Service Item Cover Starts -->
<span class="services-box-item-cover fa fa-comments-o" data-headline="Qualitative Research"></span>
<!-- Service Item Cover Ends -->
<!-- Service Item Content Starts -->
<div class="services-box-item-content fa fa-comments-o">
<h2>Qualitative Research</h2>
<p>We're experts at setting up and conducting interviews, ethnographical research, and focus groups. At the end, you'll get concise insights that tell a strategic story, rather than a text-heavy mess that you have to decipher yourself.</p>
</div>
<!-- Service Item Content Ends -->
</div>
<!-- Service Item Ends -->
<!-- Service Item Starts -->
<div class="col-lg-4 col-md-6 col-sm-12 services-box-item">
<!-- Service Item Cover Starts -->
<span class="services-box-item-cover fa fa-search" data-headline="Secondary Research"></span>
<!-- Service Item Cover Ends -->
<!-- Service Item Content Starts -->
<div class="services-box-item-content fa fa-search">
<h2>Secondary Research</h2>
<p>The best data is data that already exists. Let us help you find information that is already out there, and compile it in a story that inspires action.</p>
</div>
<!-- Service Item Content Ends -->
</div>
<!-- Service Item Ends -->
<!-- Service Item Starts -->
<div class="col-lg-4 col-md-6 col-sm-12 services-box-item">
<!-- Service Item Cover Starts -->
<span class="services-box-item-cover fa fa-puzzle-piece" data-headline="Innovation"></span>
<!-- Service Item Cover Ends -->
<div class="services-box-item-content fa fa-puzzle-piece">
<h2>Innovation</h2>
<p>Achieve breakthrough results by defining your problem, vision, hypotheses, experiments, etc. in addition to developing new concepts. We help you add structure to the innovation process so it is more efficient and fruitful.</p>
</div>
</div>
<!-- Service Item Ends -->
<!-- Service Item Starts -->
<div class="col-lg-4 col-md-6 col-sm-12 services-box-item">
<!-- Service Item Cover Starts -->
<span class="services-box-item-cover fa fa-sticky-note" data-headline="Facilitation"></span>
<!-- Service Item Cover Ends -->
<!-- Service Item Content Starts -->
<div class="services-box-item-content fa fa-sticky-note">
<h2>Facilitation</h2>
<p>Running a good meeting or workshop requires preparation and reflection time, which you may not have to devote. Let us help you with your next brainstorming, team-building, or alignment-gathering session.</p>
</div>
<!-- Service Item Content Ends -->
</div>
<!-- Service Item Ends -->
<!-- Service Item Starts -->
<div class="col-lg-4 col-md-6 col-sm-12 services-box-item">
<!-- Service Item Cover Starts -->
<span class="services-box-item-cover fa fa-question-circle" data-headline="Other"></span>
<!-- Service Item Cover Ends -->
<!-- Service Item Content Starts -->
<div class="services-box-item-content fa fa-question-circle">
<h2>Other</h2>
<p>Have another need? Surprise us with a new request.</p>
</div>
<!-- Service Item Content Ends -->
</div>
<!-- Service Item Ends -->
</div>
<!-- Services Ends -->
</div>
</body>
</html>style.css中的“服务”代码
/* Services
---------------------------------------- */
.services {
background-color: #efefef;
}
.services .services-box {
margin: 25px 0;
}
.services .services-box:before {
content: "";
display: table;
}
.services .services-box:after {
content: "";
display: table;
clear: both;
}
.services .services-box-item {
position: relative;
color: #717c8e;
text-decoration: none;
-webkit-perspective: 750px;
-ms-perspective: 750px;
-o-perspective: 750px;
perspective: 750px;
margin: 15px 0;
float: left;
}
.services .services-box-item:hover,
.services .services-box-item:focus,
.services .services-box-item.hover {
text-decoration: none;
}
.services .services-box-item:hover> .services-box-item-cover,
.services .services-box-item:focus> .services-box-item-cover,
.services .services-box-item.hover> .services-box-item-cover {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.services .services-box-item:hover> .services-box-item-content,
.services .services-box-item:focus> .services-box-item-content,
.services .services-box-item.hover> .services-box-item-content {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
.services .services-box-item-cover,
.services .services-box-item-content {
position: relative;
border-radius: 3px;
background: #fff;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.services .services-box-item-cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0px 15px;
box-shadow: 0px 0px 3px 1px #ddd;
border-radius: 7px;
}
.services .services-box-item-cover:before,
.services .services-box-item-cover:after {
position: absolute;
top: 50%;
left: 50%;
}
.services .services-box-item-cover:before {
margin: -40px 0px 0px -20px;
font-size: 40px;
}
.services .services-box-item-cover:after {
content: attr(data-headline);
font-family: "Raleway";
left: 0;
width: 100%;
margin: 20px 0 0;
font-size: 18px;
text-align: center;
font-weight: 500;
}
.services .services-box-item-content {
overflow: hidden;
margin: -16px -6px;
padding: 30px 40px;
font-size: 14px;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
border-radius: 7px;
}
.services .services-box-item-content:before {
position: absolute;
top: 0;
right: 0;
margin: -60px;
font-size: 228px;
opacity: 0.2;
}
.services .services-box-item-content h2 {
position: relative;
margin: 8px 0;
font-size: 16px;
font-weight: 500;
text-transform: Capitalize;
}
.services .services-box-item-content p {
line-height: 23px;
position: relative;
margin: 12px 0;
font-size: 13px;
}
.services[data-icon]:before,
.services[class^="icon-"]:before,
.services[class*=" icon-"]:before {
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
}
.services[data-icon]:before {
content: attr(data-icon);
}
.services[data-icon].after:before {
content: none;
}
.services[data-icon].after:after {
content: attr(data-icon);
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
margin-left: 4px;
}任何想法/帮助都是非常感谢的！
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-20 18:49:50
我能用更多的googling找到答案。
这个伟大的文章。
我在style.css中替换了这个：
.services .services-box:before {
content: "";
display: table;
}
.services .services-box:after {
content: "";
display: table;
clear: both;
}在这方面：
.services .services-box:before {
content: "";
display: table;
table-layout: fixed;
max-width: none;
width: auto;
min-width: 100%;
}
.services .services-box:after {
content: "";
display: table;
clear: both;
table-layout: fixed;
max-width: none;
width: auto;
min-width: 100%;
}问题解决了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50953267
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号