我在IE和Safari中遇到了项目对齐方面的问题，而且我对跨浏览器的兼容性并不是很好，所以如果有人可以提出我做错了什么，我会很感激。以下或可能是一个很好的一般修复。
Codepen：http://codepen.io/nickwcook/pen/vxjavM?editors=0110。
编辑：主页图像对齐已排序，但仍存在以下问题：
页面的“关于”部分中的文本在其他浏览器中很好，但在IE中它没有考虑父级的水平填充（30px），实际上溢出了视口的两侧。
HTML：
<body ng-app="portfolioApp" data-spy="scroll" data-target="#navbar">
<div id="borderTop"></div>
<div id="borderRight"></div>
<div id="borderBottom"></div>
<div id="borderLeft"></div>
<div id="logo">
<a href="#"></a>
<img src="img/logo-basic-dark.png" alt="Logo">
</div>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav pull-right">
<li class="navLink"><a href="#home" alt="Home Button">Home</a></li>
<li class="navLink"><a href="#about" alt="About Button">About</a></li>
<li class="navLink"><a href="#work" alt="Work Button">Work</a></li>
<li class="navLink"><a href="#contact" alt="Contact Button">Contact</a></li>
</ul>
</div>
</nav>
</div>
<main>
<section id="home">
<div class="sectionContent">
<div id="homeText">
<h1 id="homePrimary">Home Text Primary</h1>
<h2 id="homeSecondary">Home Text Secondary</h2>
</div>
<div id="homeImageContainer">
<div id="homeImage" class="blend-red-blue">
<div id="homeImageMask"></div>
</div>
</div>
</div>
</section>
<section id="about" ng-controller="skillsController">
<div class="sectionContent">
<div class="row">
<div class="col-xs-12 col-md-8 col-md-push-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div id="skillsList">
<p>My skills include:</p>
<p ng-repeat="skill in skills" class="skillItem">{{skill.name}}</p>
</div>
</div>
</div>
</div>
</section>
<section id="work" ng-controller="projectsController">
<div class="sectionContent">
<div class="row">
<div class="project col-xs-12 col-md-6 col-lg-3">
<div>
<h2>Project One</h2>
<h4>Project Description</h4>
<a ng-href="#" target="blank_">View Project</a>
</div>
</div>
<div class="project col-xs-12 col-md-6 col-lg-3">
<div>
<h2>Project One</h2>
<h4>Project Description</h4>
<a ng-href="#" target="blank_">View Project</a>
</div>
</div>
<div class="project col-xs-12 col-md-6 col-lg-3">
<div>
<h2>Project One</h2>
<h4>Project Description</h4>
<a ng-href="#" target="blank_">View Project</a>
</div>
</div>
<div class="project col-xs-12 col-md-6 col-lg-3">
<div>
<h2>Project One</h2>
<h4>Project Description</h4>
<a ng-href="#" target="blank_">View Project</a>
</div>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="sectionContent">
</div>
</section>
</main>
</body>
CSS：
/* GENERAL LAYOUT */
html, body
{
padding: 0;
margin: 0;
background-color: #fefefe;
overflow-x: hidden;
}
/* SECTIONS */
section
{
display: block;
margin: 0;
background: transparent;
z-index: 90;
}
.sectionContent
{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 100px 30px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
/* HOME SECTION */
#home #homeImageContainer
{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#home #homeImage
{
position: absolute;
height: 30vw;
width: 30vw;
background-image: url('../img/laptop-hands.png');
background-position: center center;
background-size: cover;
z-index: 90;
-webkit-box-shadow: 3px 3px 100px 4px rgba(153,153,153,1);
-moz-box-shadow: 3px 3px 100px 4px rgba(153,153,153,1);
box-shadow: 3px 3px 100px 4px rgba(153,153,153,1);
}
#home #homeImage > #homeImageMask
{
height: 100%;
width: 100%;
background-color: rgba(84, 17, 200, 0.6);
z-index: 91;
}
#home #homeText
{
z-index: 95;
}
#homeText h1#homePrimary,
#homeText h2#homeSecondary
{
color: #000;
text-align: center;
}
#homeText h1#homePrimary
{
font-size: 30px;
font-weight: 600;
margin-bottom: 10px;
}
#homeText h2#homeSecondary
{
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 600;
}
/* ABOUT SECTION */
#about p
{
line-height: 26px;
text-align: center;
}
#about #skillsList
{
width: 100%;
text-align: center;
margin-top: 50px;
}
#about #skillsList p:first-of-type
{
margin-bottom: 10px;
}
#about #skillsList p.skillItem
{
display: inline;
margin: 0 15px;
}
答案 0 :(得分：1)
如何简化：
body, h1, h2 {
margin: 0;
}
.box-content {
width: 30vw;
height: 30vw;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 100px 30px;
box-sizing: border-box;
background: rgba(84, 17, 200, 0.6);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
box-shadow: 3px 3px 100px 4px rgba(153, 153, 153, 1);
text-align: center;
}<div class="sectionContent">
<div id="homeText" class="box-content">
<h1 id="homePrimary">Home Text Primary</h1>
<h2 id="homeSecondary">Home Text Secondary</h2>
</div>
</div>
答案 1 :(得分：0)
您可以从选择器＆＃39; #home #homeImage＆＃39;中删除绝对css属性问题在我的最后修复