我在 IE 和 Safari 中的元素对齐方面遇到了一些问题，而且我在跨浏览器兼容性方面不是很好，所以如果有人可以建议我在以下方面做错了什么或者可能是什么，我将不胜感激良好的一般修复。
代码笔:http://codepen.io/nickwcook/pen/vxjavM?editors=0110 .
编辑:主页图像对齐排序，但仍然存在以下问题:
页面关于部分中的文本在其他浏览器中没有问题，但在 IE 中它没有考虑父级的水平填充 (30px)，实际上溢出了视口(viewport)的两侧。
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;
}
最佳答案
像这样简化怎么样:
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>关于css - Internet Explorer/Safari Flexbox(?) 和对齐问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42974143/