0

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

它在其他浏览器中运行良好，但箭头在 IE 8.0 中显示不正确。 以下是我在 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; 
}

用它更新了一个 JSFiddle。我无法使前三角形工作，也无法从正常步骤中删除后三角形。

我对CSS不是很精通，有人可以帮忙吗！！！

4

3 回答 3

2

简短的回答：没有。

您自己指出了错误：发生这种情况是由于 HTML 文档中不存在 DOCTYPE 声明。

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

这是关于 IE 如何确定显示哪种模式的图表，此页面提供有关定义文档兼容性的信息。

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

于 2012-08-20T19:12:39.213 回答
0

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

于 2012-08-20T21:39:10.723 回答
0

遵循 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

于 2012-08-21T00:20:28.947 回答