IE定位问题

Question

我正在为我父亲的网站做一个新的网页项目，但是在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规则和视觉显示规则混在一起了。从答案顶部的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将覆盖的任何规则。