IE バージョン互換性の問題_html/css_WEB-ITnose

私のマシンには IE10 がインストールされており、ファイル選択ボックスは次のようになります

しかし、IETester を使用してさまざまな IE バージョンをテストしたところ、IE6 から IE8 まで次のような効果が表示されました

ファイルをまったく選択できず、 HTMLコードは

 <input type="file" id="foo" runat="server" /> <a href="javascript:ImportExcel()">导入Excel</a> 

また質問があります
IETesterでは、IE6とIE7の効果はこんな感じです

IE8以降は正常です、そのはずです

HTMLコードは

<div class="well summary">						<ul>							<li>								<a href="#"><span class="count">3</span> Projects</a>							</li>							<li>								<a href="#"><span class="count">27</span> Tasks</a>							</li>							<li>								<a href="#"><span class="count">7</span> Messages</a>							</li>							<li class="last">								<a href="#"><span class="count">5</span> Files</a>							</li>						</ul>					</div>

CSSスタイルコードは

.well {  min-height: 20px;  padding: 19px;  margin-bottom: 20px;  background-color: #f5f5f5;  border: 1px solid #e3e3e3;  -webkit-border-radius: 4px;     -moz-border-radius: 4px;          border-radius: 4px;  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);}.summary {display:table; width:100%; padding:0; margin:0 0 20px 0;}.summary ul {margin:0; padding:0; overflow:hidden; display:table-row;}.summary li {margin:0; padding:19px; display:table-cell; border-right:1px solid #eee;}.summary li:last-child {border:none;}.summary a {display:block; font-size:1.2em; line-height:1.4em; text-transform:uppercase; color:#000;}.summary .count {display:block; font-size:1.75em; font-weight:bold;}	/* dashboard - ie fixes */	.ie7 .summary {display:block;}	.ie7 .summary ul {margin:0; padding:0; overflow:hidden; display:block;}	.ie7 .summary li {float:left;}		.ielt9 .summary .last {border:none;}

ディスカッションに返信 (解決済みの解決策)

2 番目の理由は、display:table-cell が IE6 と IE7 をサポートしていないことであることが判明しました
しかし、CSS コードをどのように変更すればよいでしょうか?助けてください

最初の質問は、runat='"server" を削除してその効果を確認してみてください。または、size または CSS width で幅を設定します。
2 番目の質問、float:left を使用しました。li の幅を設定して、すべての li の合計幅 (境界線、マージン、その他の要素を考慮して) が外枠の幅よりも小さくなるようにすることができます。一列に並ぶこと。

2 番目の質問です。幅と高さを動的かつ自動的に設定する必要がある場合は、htc ファイル display-table.htc をダウンロードし、そのファイルを引用して、ページの紹介に従って CSS を設定できます。

最初のものは jQuery の Uploadify を使用して解決しました
2 つ目はその後 CSS でコードの一部を見つけました
/* ダッシュボード - ie 修正 */
.ie7 .summary {display:block;}
.ie7 .summary ul {マージン:0; パディング:0; オーバーフロー:非表示; ディスプレイ:ブロック;}
.ie7 .summary li {float:left;}
.ielt9 .last {border:none;}
に div を追加します外層でクラスを ie7 に設定すると、ie6 と ie7 の両方が正常になります

ご提案ありがとうございます

多くの外国の Web ページ テンプレートは、html ノードに class="ie7" を追加します。既存のフレームワークの下で追加のレイヤーを追加する必要もありません。

最初のものは jQuery の Uploadify を使用して解決しました

2 つ目はその後 CSS でコードの一部を見つけました
/* ダッシュボード - ie 修正 */
.ie7 .summary {display:block;}
.ie7 .summary ul {マージン:0; パディング:0; オーバーフロー:非表示; ディスプレイ:ブロック;}
.ie7 .summary li {float:left;}
.ielt9 .last {border:none;}
に div を追加します外側の層でクラスを ie7 に設定すると、結果は ie6 と ie7 の両方が正常になります

ご提案ありがとうございます