在Safari和Chrome中格式化
在chrome和edge中，服务磁贴看起来正确：
在野生动物园中，行被弄乱了：
我不是这方面的专家...我只是一名自由职业者，试图做所有事情...并四处张望，无法发现问题的根源。 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 个答案:
答案 0 :(得分：0)
我可以通过更多的搜索来弄清楚。
太棒了article。
我将其替换为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%;
}
问题解决了。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？