0

我即将结束我父亲网站的新 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]-->
4

1 回答 1

0

我认为问题出在您的 clearfix 技术上。一个“clearfix”是什么给浮动元素，比如你的滑块，一个外部可见的高度，而不是浮动元素的正常零高度。您的 clearfix 在大多数浏览器中都有效，但在 IE 中无效。

尝试这个关于 clearfixes 方法的答案中描述的 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 将覆盖的任何规则。

于 2012-09-17T21:09:55.413 回答