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将覆盖的所有规则。

IE定位问题

1 个答案: