html - Internet Explorer (IE) 中的奇怪缩进

Question

我在页面开头使用 CSS 动画元素，它在 Google Chrome 中呈现良好，但在 IE 中出现奇怪的缩进。下面是我正在使用的代码。我尝试了各种修复，但无法弄清楚。

我不是最精明的程序员，因为我不是 Web 开发人员。

页面可以在这里访问:

https://secure3.convio.net/little/site/SPageNavigator/Holiday%20Page%20Wrapper/HolidayCampaign2015.html

下面是与我所指部分相关的代码片段。

.header-wrapper{
	width: 100%;
        background-image: url(https://www.littlecity.org/wp-content/uploads/2015/11/FusciaChevronPattern-cover.jpg);
        background-size: cover;
	position: relative;
	margin: 0 auto 0 auto;
	font-family: "museo-sans", Helvetica, Arial, sans-serif;
	
}
.rw-wrapper{
	width: 80%;
        position: relative;
	margin: 0 auto 0 auto;
	font-family: "museo-sans", Helvetica, Arial, sans-serif;
vertical-align: middle;
text-align: center;
line-height: 1;
	
}

.rw-sentence{
	margin: 0;
	text-align: center;
        display: block;
	position: relative;
        text-transform: none;
        vertical-align: middle;
}
.rw-sentence span{
	color: #fff;
	font-size: 18px;
	font-weight: 600;
        white-space: normal;
}
@media (min-width: 480px) { .rw-sentence span{ font-size: 24px;}}
@media (min-width: 768px) { .rw-sentence span{ font-size: 32px;}}
.rw-words{
	display: inline;
        text-transform: none;
        line-height: 1;
   
}
.rw-words span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	width: 100%;
	color: #fff;
        font-weight: 300;
        text-align: center;
        white-space: normal;
}
.rw-words-1 span{
	animation: rotateWordsFirst 20s linear infinite 0s;
}
.rw-words-2 span{
	animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) { 
	animation-delay: 4s; 
	color: #fff;
}
.rw-words span:nth-child(3) { 
	animation-delay: 8s; 
	color: #fff;	
}
.rw-words span:nth-child(4) { 
	animation-delay: 12s; 
	color: #fff;
}
.rw-words span:nth-child(5) { 
	animation-delay: 16s; 
	color: #fff;
}
@keyframes rotateWordsFirst {
        0% { opacity: 1; animation-timing-function: ease-in; width: 100%; }
    10% { opacity: 0; width: 100%; }
	17% { opacity: 0; width: 100%; }
    23% { opacity: 0; width: 100%; }
    35% { opacity: 0; width: 100%; }
    45% { opacity: 0; width: 100%; }
    55% { opacity: 0; width: 100%; }
    65% { opacity: 0; width: 100%; }
    75% { opacity: 0; width: 100%; }
    100% { opacity: 0;}
}
.button1{
    color: #fff;
    display: inline-block;
    font-size: 18px;
    letter-spacing: .75px;
    padding: 15px 21px;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    vertical-align: middle;
}
a.button1 { display: inline-block; text-decoration: none; vertical-align: top; border: none; }
a.button1:link { color: #fff; text-decoration: none;}
.blue-bg { background-color: #00bce4;}
.contained-7 { max-width: 735px; }
.centered { margin-left: auto; margin-right: auto; }
.viewport-two-thirds-height { height: 600px; height: 66.66vh; }
.content-overlay { z-index: 1; position: relative; }
.content-overlay.middle { position: absolute; width: 100%; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.align-center { text-align: center; }
.padding-3x-2x { padding: 60px 40px; }

<div class="header-wrapper viewport-two-thirds-height">
<div class="content-overlay middle">
<h2 class="rw-sentence">
		<img class="padding-2x" src="https://www.littlecity.org/wp-content/uploads/2015/11/TagYoureIt_type.png" alt="Tag You're It!" /><br />
		<span>When you give, you</span><br />
<div class="rw-words rw-words-1">
		<span>provide opportunities for people to work.</span>
		<span>allow students to learn.</span>
		<span>help preserve families and strengthen relationships.</span>
		<span>improve the overall quality of life of the individuals we serve.</span>
		<span>spread happiness and joy to each of our children and adults.</span>
                </div>
</h2>
<div class="contained-7 centered align-center padding-3x-2x">
<a class="button1 blue-bg" title="Give Now" href="https://little.convio.net">Give Now</a>
</div>
</div>
</div>

Answer 1

其实我觉得IE才是正确的做法。无论如何，从父 div 中删除 display: inline; 并将 left: 0; 添加到 span:

.header-wrapper{
	width: 100%;
        background-image: url(https://www.littlecity.org/wp-content/uploads/2015/11/FusciaChevronPattern-cover.jpg);
        background-size: cover;
	position: relative;
	margin: 0 auto 0 auto;
	font-family: "museo-sans", Helvetica, Arial, sans-serif;
	
}
.rw-wrapper{
	width: 80%;
        position: relative;
	margin: 0 auto 0 auto;
	font-family: "museo-sans", Helvetica, Arial, sans-serif;
vertical-align: middle;
text-align: center;
line-height: 1;
	
}

.rw-sentence{
	margin: 0;
	text-align: center;
        display: block;
	position: relative;
        text-transform: none;
        vertical-align: middle;
}
.rw-sentence span{
	color: #fff;
	font-size: 18px;
	font-weight: 600;
        white-space: normal;
}
@media (min-width: 480px) { .rw-sentence span{ font-size: 24px;}}
@media (min-width: 768px) { .rw-sentence span{ font-size: 32px;}}
.rw-words{
        text-transform: none;
        line-height: 1;
}
.rw-words span{
  left: 0;
	position: absolute;
	opacity: 0;
	overflow: hidden;
	width: 100%;
	color: #fff;
        font-weight: 300;
        text-align: center;
        white-space: normal;
}
.rw-words-1 span{
	animation: rotateWordsFirst 20s linear infinite 0s;
}
.rw-words-2 span{
	animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) { 
	animation-delay: 4s; 
	color: #fff;
}
.rw-words span:nth-child(3) { 
	animation-delay: 8s; 
	color: #fff;	
}
.rw-words span:nth-child(4) { 
	animation-delay: 12s; 
	color: #fff;
}
.rw-words span:nth-child(5) { 
	animation-delay: 16s; 
	color: #fff;
}
@keyframes rotateWordsFirst {
        0% { opacity: 1; animation-timing-function: ease-in; width: 100%; }
    10% { opacity: 0; width: 100%; }
	17% { opacity: 0; width: 100%; }
    23% { opacity: 0; width: 100%; }
    35% { opacity: 0; width: 100%; }
    45% { opacity: 0; width: 100%; }
    55% { opacity: 0; width: 100%; }
    65% { opacity: 0; width: 100%; }
    75% { opacity: 0; width: 100%; }
    100% { opacity: 0;}
}
.button1{
    color: #fff;
    display: inline-block;
    font-size: 18px;
    letter-spacing: .75px;
    padding: 15px 21px;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    vertical-align: middle;
}
a.button1 { display: inline-block; text-decoration: none; vertical-align: top; border: none; }
a.button1:link { color: #fff; text-decoration: none;}
.blue-bg { background-color: #00bce4;}
.contained-7 { max-width: 735px; }
.centered { margin-left: auto; margin-right: auto; }
.viewport-two-thirds-height { height: 600px; height: 66.66vh; }
.content-overlay { z-index: 1; position: relative; }
.content-overlay.middle { position: absolute; width: 100%; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.align-center { text-align: center; }
.padding-3x-2x { padding: 60px 40px; }

<div class="header-wrapper viewport-two-thirds-height">
<div class="content-overlay middle">
<h2 class="rw-sentence">
		<img class="padding-2x" src="https://www.littlecity.org/wp-content/uploads/2015/11/TagYoureIt_type.png" alt="Tag You're It!" /><br />
		<span>When you give, you</span><br />
<div class="rw-words rw-words-1">
		<span>provide opportunities for people to work.</span>
		<span>allow students to learn.</span>
		<span>help preserve families and strengthen relationships.</span>
		<span>improve the overall quality of life of the individuals we serve.</span>
		<span>spread happiness and joy to each of our children and adults.</span>
                </div>
</h2>
<div class="contained-7 centered align-center padding-3x-2x">
<a class="button1 blue-bg" title="Give Now" href="https://little.convio.net">Give Now</a>
</div>
</div>
</div>