0

次の JSFiddleで提供される html と css を使用しています。

他のブラウザでは問題なく動作していますが、IE 8.0 では矢印が正しく表示されません。 以下は、IE 8.0で表示されるものです

これは、HTML ドキュメントに存在しないDOCTYPE 宣言が欠落しているために発生します。残念ながら、DOCTYPE 宣言を追加すると、既存のアプリ ブレークで多くのことが発生するため、追加できません。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; 
}

これで JSFiddleを更新しました。前の三角形を機能させることも、通常のステップから後の三角形を削除することもできません。

私はCSSにあまり精通していません。誰か助けてください!!!

4

3 に答える 3

2

簡単な答え：いいえ。

あなたは自分でエラーを指摘しました：これは、HTMLドキュメントに存在しないDOCTYPE宣言が欠落しているために発生します。

Doctypeについての表示がない場合、IEはデフォルトでquirksモード（ie6と考えてください）になります。クァークズモードに入らないためにあなたが取ることができるいくつかの追加のステップがあります。

これは、IEが表示するモードを決定する方法に関するチャートであり、このページには、ドキュメントの互換性の定義に関する情報が記載されています。

そして...クァークズモードが必要なため、ページの残りの部分が壊れます。解決策は、このコードをクァークズモードと互換性があるようにやり直すことです。（「既存のアプリの中断で多くのことが発生するため、DOCTYPE宣言を追加できません」）それまたは...アプリ全体をやり直します！

于 2012-08-20T19:12:39.213 に答える
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 に答える
0

doctype の欠落という答えはすでにわかっているので、doctype が宣言されていない他のブラウザーの問題が見つかることを指摘しておきます。必要な理由があります。これはあなたが見つけた最初の問題にすぎません。

于 2012-08-20T21:39:10.723 に答える