css 箭头在 IE 8 中未正确显示

Question

我使用的是以下a JSFiddle提供的html和css。

它在其他浏览器中运行良好，但箭头在 IE 8.0 中显示不正确。

这是由于 HTML 文档中不存在 缺少 DOCTYPE 声明。不幸的是，我无法添加 DOCTYPE 声明，因为它会导致现有应用程序中断很多事情。我只是想知道是否可以在不添加 DOCTYPE 声明的情况下解决此问题。

请帮忙！

编辑： 我发现下面的 css 代码可以让三角形在怪异模式下工作（有点）

.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 声明。

在没有说明文档类型的情况下，IE 默认进入 quirks 模式（想想 ie6）。您可以采取一些额外的步骤来not go在怪癖模式下。

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

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

Answer 2

既然您已经找到了答案，即缺少的文档类型，我想指出的是，您会发现其他浏览器问题没有声明文档类型。需要它是有原因的。这只是你发现的第一个问题，如果我是你，我会期待更多。

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