IE定位问题

Question

我即将结束为我父亲的网站建立的一个新的Web项目，但是在IE中打开它之后，我现在想要跳下一座桥！

我附上了两个屏幕截图，展示了IE浏览器与其他任何浏览器相比如何呈现网站。出于某种奇怪的原因，它正在推动滑块下面的页面内容。

在IE它呈现像这样：http://cl.ly/JVgZ

在其他浏览器中被呈现为预期的，这样的：http://cl.ly/JVgo

（对不起，新手，所以我不能发布图像直接-.-）

正如您所看到的，整个深灰色文本区域隐藏在滑块下方。

我假设这是CSS相关的，和我的滑块代码如下：

body { } 
.panel h2.title { } 
/* Most common stuff you'll need to change */ 

.coda-slider-wrapper { } 
.coda-slider { padding-bottom: 0px; padding-top: 0px; background-color: #262626; } 

/* Use this to keep the slider content contained in a box even when JavaScript is disabled */ 
.coda-slider-no-js .coda-slider { overflow: auto !important; } 

/* Change the width of the entire slider (without dynamic arrows) */ 
/* Change margin and width of the slider (with dynamic arrows) */ 
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 1280px } 

/* Arrow styling */ 
.coda-nav-left a, .coda-nav-right a { } 

/* Tab nav */ 
.coda-nav ul li a.current { 
color: white; 
height: 60px; 
z-index: 9999; 
position: relative; 
} 

.coda-nav ul li a.current:before { 
    content: ''; 

    position: absolute; 
    height: 0; 
    width: 0; 
    bottom: 2px; 
    left: 50%; 
    margin-left: -9px; 
    z-index: 9999; 


    border: 10px solid transparent; 
    border-top: 10px solid #303030; 
    border-bottom: none; 
} 


/* Panel padding */ 
.coda-slider .panel-wrapper { } 

/* Preloader */ 
.coda-slider p.loading { text-align: center } 

/* Tabbed nav */ 
.coda-nav ul { margin-left: 167px; margin-top: 0px; margin-bottom: 0px; clear: both; display: block; overflow: hidden;} 
.coda-nav ul li { display: inline } 
.coda-nav ul li a { letter-spacing: 0.5px; margin-right: 30px; text-align: center; font-size: 20px; font-family: FreightSansBook; color: #bfbfbf; display: block; float: left; text-decoration: none } 


.coda-nav ul li a:hover { letter-spacing: 0.5px; margin-right: 30px; text-align: center; font-size: 20px; font-family: FreightSansBook; color: white; display: block; float: left; text-decoration: none } 

/* Miscellaneous */ 
.coda-slider-wrapper { clear: both; overflow: auto } 
.coda-slider { float: left; overflow: hidden; position: relative } 
.coda-slider .panel { display: block; float: left } 
.coda-slider .panel-container { position: relative } 
.coda-nav-left, .coda-nav-right { display: none; } 
.coda-nav-left a, .coda-nav-right a { display: none; } 
p { color: #bfbfbf; } 

我希望有人能救我！

非常感谢您的时间和任何帮助。

编辑：此代码也存在于部分我的HTML文档中......

<!--[if IE]> 
    <style type="text/css"> 
    .timer { display: none !important; } 
    div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; } 
    #sliderarea {position: absolute !important; margin-top: 0px !important;} 
    div.orbit-wrapper {margin-top: -140px !important; position: absolute !important;} 
    </style> 
    <![endif]--> 

Answer 1

我认为这个问题是您的clearfix技术。 “clearfix”是浮动元素（例如滑块）的外部可见高度，而不是浮动元素的正常零高度。您的clearfix在大多数浏览器中都可以使用，但不能在IE中使用。

尝试使用this answer about methods for clearfixes中描述的clearfix的替代方法。也许这些其他方法会比现在的更好。我有问题告诉你当前的方法是什么，因为你的clearfix规则与你的视觉显示规则混合在一起。从回答顶部的micro-clearfix开始：

/* For modern browsers */ 
.coda-nav ul li a.current:before, 
.coda-nav ul li a.current:after { 
    content:""; 
    display:table; 
} 
.coda-nav ul li a.current:after { 
    clear:both; 
} 
/* For IE 6/7 (trigger hasLayout) */ 
.coda-nav ul li a.current { 
    zoom:1; 
} 

删除您的现有代码中clearfix将覆盖的任何规则。