css - IE定位问题

Question

我即将结束我父亲网站的一个新 Web 元素，但是在 IE 中打开它之后，我现在想跳桥了!

我附上了两个屏幕截图，展示了网站在 IE 中的呈现方式与任何其他浏览器的对比。出于某种奇怪的原因，它将页面内容推到 slider 下方。

在 IE 中它呈现如下:http://cl.ly/JVgZ

在其他浏览器中按预期呈现，如下所示:http://cl.ly/JVgo

(对不起，新手所以我不能直接发布图片-.-)

如您所见，整个深灰色文本区域都隐藏在 slider 下方。

我假设这是 CSS 相关的，我的 slider 代码如下:

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”是为 float 元素(例如 slider )提供外部可见高度，而不是 float 元素的正常零高度。您的 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 将覆盖的任何规则。