在IE 8中css箭头没有正确显示

Question

我正在使用以下 a JSFiddle中提供的html和css。

它在其他浏览器中工作正常，但在IE 8.0中箭头没有正确显示。

这是因为HTML文档中不存在缺少DOCTYPE声明。不幸的是，我无法添加DOCTYPE声明，因为它会在现有的app break中引发很多问题。我只想知道是否可以在不添加DOCTYPE声明的情况下解决此问题。

请帮忙！

修改 我发现以下css代码在quirk模式下进行三角形工作（排序）

.wizard-steps .a-after{
BORDER-BOTTOM: transparent 12px dashed;
BORDER-LEFT: transparent 12px dashed;
BORDER-TOP: transparent 12px dashed; 
BORDER-RIGHT: transparent 12px dashed;
line-height: 0;
POSITION: relative; 
WIDTH: 0px; 
DISPLAY: inline-block; 
HEIGHT: 0px; 
VERTICAL-ALIGN: middle; 
}

更新了 a JSFiddle 。我无法使前三角形工作也从正常步骤中移除后三角形。

我对CSS不是很精通，任何人都可以帮忙!!!

Answer 1

简答：不。

您自己指出了错误：这是因为HTML文档中缺少DOCTYPE声明。

没有关于doctype的指示，IE默认进入怪癖模式（想想ie6）。在怪癖模式下，您可以采取一些额外的步骤不要。

Here's a chart about how IE determine which mode to display和this page provide info about defining a document compatibility。

然后......由于需要怪癖模式，页面的其余部分将会中断。解决方案是将此代码重做为 quirks mode compatible 。 （“我无法添加DOCTYPE声明，因为它会导致现有应用程序中断的很多事情”）或者...重做整个应用程序！

Answer 2

由于您已经找到答案，缺少doctype，我只想指出您会发现其他浏览器问题而没有声明doctype。这是有必要的。这只是你发现的第一个问题，如果我是你，我会期待更多。

Answer 3

在CSS工作之后（即使在quirk模式下）并给了我足够接近的结果来实现我的目标。

/*navigation css*/
.wizard-steps{ position:relative;clear:both;font-family:"Helvetica Neue", Helvetica,   Arial, sans-serif;font-weight:700;margin:20px 10px 0;padding:0}
.wizard-steps .step{position:relative}
.wizard-steps div{float:left;}
.wizard-steps span{display:block;float:left;font-size:10px;text-align:center;width:15px;line-height:15px;color:#ccc;background:#FFF;border:2px solid #CCC;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;margin:2px 5px 0 0}
.wizard-steps label{position:relative;display:block;height:24px;float:left;font-size:11px;line-height:24px;color:#666;background:#ECECEC;text-decoration:none;text-shadow:1px 1px 1px rgba(255,255,255,0.8);padding:0 10px 0 3px}
.wizard-steps .a-before{width:0px;height:0px;border-top:12px solid #ECECEC;border-bottom:12px solid #ECECEC;border-left:12px solid transparent;line-height: 0;POSITION: relative;}
.wizard-steps .a-after{BORDER-BOTTOM: transparent 12px dashed;BORDER-LEFT: transparent 12px dashed;BORDER-TOP: transparent 12px dashed;BORDER-RIGHT: transparent 12px dashed;line-height: 0;POSITION: relative;WIDTH: 0px;DISPLAY: inline-block;HEIGHT: 0px;VERTICAL-ALIGN: middle;}
.wizard-steps .step .a-after{border-left:12px solid #ECECEC}
.wizard-steps .completed-step label{color:#163038;background:#7EBFE6}
.wizard-steps .completed-step .a-before{border-top:12px solid #7EBFE6;border-bottom:12px solid #7EBFE6}
.wizard-steps .completed-step .a-after{border-left:12px solid #7EBFE6}
.wizard-steps .completed-step span{border:2px solid #7EBFE6;color:#163038;text-shadow:none}
.wizard-steps .active-step label{color:#FFF;background:#019BDB;text-shadow:1px 1px 1px rgba(0,0,0,0.8)}
.wizard-steps .active-step .a-before{border-top:12px solid #019BDB;border-bottom:12px solid #019BDB}
.wizard-steps .active-step .a-after{border-left:12px solid #019BDB}
.wizard-steps .active-step span{color:#293E68;-webkit-box-shadow:0 0 2px rgba(0,0,0,0.8);-moz-box-shadow:0 0 2px rgba(0,0,0,0.8);box-shadow:0 0 2px rgba(0,0,0,0.8);text-shadow:none;border:2px solid #A3C1C9}
.wizard-steps .completed-step:hover label,.wizard-steps .active-step:hover label{color:#fff;background:#8F061E;text-shadow:1px 1px 1px rgba(0,0,0,0.8)}
.wizard-steps .completed-step:hover span,.wizard-steps .active-step:hover span{color:#8F061E}
.wizard-steps .completed-step:hover .a-before,.wizard-steps .active-step:hover .a-before{border-top:12px solid #8F061E;border-bottom:12px solid #8F061E}
.wizard-steps .completed-step:hover .a-after,.wizard-steps .active-step:hover .a-after{border-left:12px solid #8F061E}

同时更新了 JS Fiddle