此处：http://thunderstorm999.byethost9.com/
观察页脚文本。它在IE中与在Chrome和Firefox浏览器中不一样。我的字体在IE中不显示。同样由于这个原因，IE中的对齐方式与Firefox和Chrome中的对齐方式不同。在IE和其他浏览器中，布局也有所不同。请告诉我哪里出错了。我面临的问题是什么对于IE。请按照上面的链接。
@font-face {
font-family: 'footerFont';
src: url('UniversLTStd-LightCn.eot'),url('UniversLTStd-LightCn.otf'),url('UniversLTStd-LightCn.ttf');
}
header{
width:1366px;
}
.logo{
padding-left:80px;
margin-left:36px;
margin-bottom:10px;
margin-top:36px;
}
.share{
list-style:none;
float:right;
margin-right:60px;
margin-left:36px;
margin-top: -36px;
}
.share li{
display:inline;
padding-right:20px;
}
aside{
margin-left:-10px;
border-right: 1px dotted red;
height:622px;
width:128px;
margin-top:-7px;
}
aside li{
width:60px;
margin-left:1px;
}
.navigation{
list-style:none;
padding-top:10px;
}
.navigation li{
text-align:center;
margin-bottom:20px;
}
.social_icons{
list-style:none;
padding-top:10px;
margin-top: 88px;
}
.social_icons li{
text-align:center;
margin-bottom:10px;
}
.main-image .image1{
position: absolute;
border-top-style: solid;
border-top-width: 0px;
margin-left: 119px;
top: 78px;
}
footer{
width: 1365px;
font-size:11.333333px;
padding:0;
height: 30px;
border-top: 1px dotted red;
font-family:"footerFont",Times New Roman, Georgia, Serif;
position:relative;
}
.left_footer{
list-style:none;
margin-left:-42px;
margin-bottom:0px;
margin-top:-20px;
}
.left_footer p{
display:inline;
float:left;
}
.footer_p1{
margin-left: 108px;
padding-right:15px;
margin-top:18px;
}
.footer_p2{
margin-top:18px;
margin-left: 2px;
}
.right_footer{
list-style:none;
margin-bottom:0px;
margin-top:-20px;
margin-right:-42px;
}
.right_footer p{
display:inline;
float:right;
position:absolute;
}
.footer_p3
{
right:16px;
margin-top:18px;
}
.footer_p4
{
right:164px;
margin-top:18px;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Speck</title>
<link rel="stylesheet" type="text/css" href="normalize.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<!--[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$(function(){
$('#play').click(function() { $('#slider').cycle('resume'); return false; });
$('#pause').click(function() { $('#slider').cycle('pause'); return false; });
$('#slider').cycle({
fx: 'scrollHorz',
next: '#next',
prev: '#prev',
pager: '#pager',
timeout: 3000,
speed: 900
});
});
</script>
<style type="text/css">
#hero {
width: 1245px;
height: 622px;
display: block;
position: absolute;
top: 78px;
left: 127px;
}
#slider {
width: 1245px;
height: 622px;
display: block;
position: absolute;
overflow: hidden;
}
.info {
width: 960px;
height: 80px;
display: block;
position: relative;
bottom: 100px;
background: rgba(102,204,204,.2);
z-index: 99;
}
.info h2 {
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
color: #FFF;
padding: 15px 0 0 20px;
}
.info p {
font-family: sans-serif;
font-size: 15px;
font-weight: ligher;
color: #FFF;
padding: 0 0 0 20px;
line-height: 1px;
}
#play {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
display: block;
position: absolute;
top: 0;
right: 44px;
background: rgba(102,204,0,.2);
color: #FFF;
cursor: pointer;
z-index: 999;
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
#pause {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
display: block;
position: absolute;
top: 0;
right: 88px;
background: rgba(102,204,0,.2);
color: #FFF;
cursor: pointer;
z-index: 999;
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
#next {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
display: block;
position: absolute;
top: 0;
right: 0;
background: rgba(102,204,0,.2);
color: #FFF;
cursor: pointer;
z-index: 999;
}
#prev {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
display: block;
position: absolute;
top: 0;
right: 133px;
background: rgba(102,204,0,.2);
color: #FFF;
cursor: pointer;
z-index: 999;
}
#pager {
width: 100%;
text-align: center;
display: block;
position: absolute;
cursor: pointer;
z-index: 999;
}
#pager a {
font-size: .0em;
color: transparent;
width: 10px;
height: 10px;
display: inline-block;
position: relative;
border: 1px solid #FFF;
border-radius: 20px;
background: transparent;
margin: 10px;
}
#pager a.activeSlide { background: #FFF;}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">
<img src="images\logo.png"/>
</div>
<ul class="share">
<li><img class="image1" src="images\fade.png"/></li>
<li><img class="image2" src="images\cart.png"/></li>
<li><img class="image3" src="images\share.png"/></li>
</ul>
</header>
<aside>
<ul class="navigation">
<li><a href="#"><img id="image1" src="images\explore.png"/></a></li>
<li><a href="#"><img src="images\material.png"/></a></li>
<li><a href="#"><img src="images\team.png"/></a></li>
<li><a href="#"><img src="images\contact.png"/></a></li>
<li><a href="#"><img src="images\merchandise.png"/></a></li>
</ul>
<ul class="social_icons">
<li><a href="#"><img id="image1" src="images\fb.png"/></a></li>
<li><a href="#"><img src="images\vimeo.png"/></a></li>
<li><a href="#"><img src="images\linkedin.png"/></a></li>
</ul>
</aside>
<div id="hero">
<div id="pager"></div>
<div id="pause">≈</div>
<div id="play">Δ</div>
<div id="next">⟩</div>
<div id="prev">⟨</div>
<div id="slider">
<div class="items">
<img src="01-secret-gathering.jpg">
<div class="info">
<h2>The Secret Gathering</h2>
<p>This is the moment, captured in time. <a href="http://www.bokharia.com">Learn More</a></p>
</div><!--End--info-->
</div><!--End--Items-->
<div class="items">
<img src="02-sky-race.jpg">
<div class="info">
<h2>The Sky Race Begins</h2>
<p>This is the moment, captured in time. <a href="http://www.bokharia.com">Learn More</a></p>
</div><!--End--info-->
</div><!--End--Items-->
<div class="items">
<img src="03-sky-wall.jpg">
<div class="info">
<h2>The Sky Wall Rising</h2>
<p>This is the moment, captured in time. <a href="http://www.bokharia.com">Learn More</a></p>
</div><!--End--info-->
</div><!--End--Items-->
<div class="items">
<img src="04-sun-ring.jpg">
<div class="info">
<h2>The Sun has Rings</h2>
<p>This is the moment, captured in time. <a href="http://www.bokharia.com">Learn More</a></p>
</div><!--End--info-->
</div><!--End--Items-->
<div class="items">
<img src="05-moon-duality.jpg">
<div class="info">
<h2>The Moon Duality</h2>
<p>This is the moment, captured in time. <a href="http://www.bokharia.com">Learn More</a></p>
</div><!--End--info-->
</div><!--End--Items-->
</div><!--End--Slider-->
</div>
</div>
<footer>
<ul class="left_footer">
<li><p class="footer_p1">© COPYRIGHT 2015 SPECK</p></li>
<li><p class="footer_p2">TERMS & CONDITIONS</p></li>
</ul>
<ul class="right_footer">
<li><p class="footer_p3">DEVELOPED BY IDEATE FUSION</p></li>
<li><p class="footer_p4">DESIGNED BY SPECK</p></li>
</ul>
</footer>
</body>
</html>
答案 0 :(得分：0)
你应该将此方法用于IE的路径.EOT字体：
src: url('../font/Yekan.eot?#iefix') format('embedded-opentype')
答案 1 :(得分：0)
检查IE控制台（按F12后）。在你的页面上我得到了：
CSS3114: @font-face failed OpenType embedding permission check.
Permission must be Installable.
UniversLTStd-LightCn.otf
这可能需要编辑otf字体。请参阅for example。
1提示：对字体URL使用小写字母。大写字母可以在IE中产生意想不到的结果！
2 IE：字体格式[TTF / OTF]仅在设置为“可安装”时才有效。