IE版本兼容性问题

[yaotomo]

我机器上安装的是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;}

[yaotomo]

查出第二个原因是display:table-cell 不支持IE6，IE7 可是应该怎么修改CSS代码呢？求助啊

[save4me]

第一个问题，尝试去掉runat='"server"，看看效果。或者通过size或者css的width设置一下宽度。 第二个问题，你已经使用了float:left，可以设置li的宽度，保证所有li的总宽度(考虑border，margin等因素)小于外框的宽度，这样就可以在一行了。

[save4me]

第二个问题，如果你需要动态自动设置宽度和高度，可以下载display-table.htc这个htc文件，再按照页面的介绍引用文件和设置css。

[yaotomo]

第一个我改用jQuery的uploadify解决了 第二个 后来发现css中有一段代码 /* 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;} 在外层加个div，设置class为ie7，结果ie6,ie7都正常了 还是谢谢你的建议

[save4me]

国外好些网页模板在html节点添加class="ie7"这种的方式，这样就不用在现有的框架下再添加额外的层了。

引用 4 楼 yaotomo 的回复:

第一个我改用jQuery的uploadify解决了 第二个 后来发现css中有一段代码 /* 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;} 在外层加个div，设置class为ie7，结果ie6,ie7都正常了 还是谢谢你的建议