Inhaltsverzeichnis
回复讨论(解决方案)
Heim Web-Frontend HTML-Tutorial IE版本兼容性问题_html/css_WEB-ITnose

IE版本兼容性问题_html/css_WEB-ITnose

Jun 24, 2016 am 11:59 AM
兼容 版本

我机器上安装的是IE10,文件选择框是这个样子的

可是我用IETester测试各个IE版本,从IE6到IE8都是显示以下效果

根本就无法选择文件,html代码是

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


还有一个问题
在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>
Nach dem Login kopieren


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;}
Nach dem Login kopieren


回复讨论(解决方案)

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

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

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

第一个我改用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都正常了

还是谢谢你的建议

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

第一个我改用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都正常了

还是谢谢你的建议

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So überprüfen Sie schnell die Numpy-Version So überprüfen Sie schnell die Numpy-Version Jan 19, 2024 am 08:23 AM

So überprüfen Sie schnell die Numpy-Version

So überprüfen Sie die Maven-Version So überprüfen Sie die Maven-Version Jan 17, 2024 pm 05:06 PM

So überprüfen Sie die Maven-Version

Tutorial zum Aktualisieren der Curl-Version unter Linux! Tutorial zum Aktualisieren der Curl-Version unter Linux! Mar 07, 2024 am 08:30 AM

Tutorial zum Aktualisieren der Curl-Version unter Linux!

Einfache Schritte zum Aktualisieren der Pip-Version: in 1 Minute erledigt Einfache Schritte zum Aktualisieren der Pip-Version: in 1 Minute erledigt Jan 27, 2024 am 09:45 AM

Einfache Schritte zum Aktualisieren der Pip-Version: in 1 Minute erledigt

Überprüfen Sie die Version des Kirin-Betriebssystems und des Kernels Überprüfen Sie die Version des Kirin-Betriebssystems und des Kernels Feb 21, 2024 pm 07:04 PM

Überprüfen Sie die Version des Kirin-Betriebssystems und des Kernels

Interpretieren Sie die Bedeutung und den Unterschied der PHP-Version NTS Interpretieren Sie die Bedeutung und den Unterschied der PHP-Version NTS Mar 27, 2024 am 11:48 AM

Interpretieren Sie die Bedeutung und den Unterschied der PHP-Version NTS

So überprüfen Sie ganz einfach die installierte Version von Oracle So überprüfen Sie ganz einfach die installierte Version von Oracle Mar 07, 2024 am 11:27 AM

So überprüfen Sie ganz einfach die installierte Version von Oracle

Um Python einfach unter Windows zu installieren, können Sie zwischen zwei Methoden wählen Um Python einfach unter Windows zu installieren, können Sie zwischen zwei Methoden wählen Feb 18, 2024 pm 04:57 PM

Um Python einfach unter Windows zu installieren, können Sie zwischen zwei Methoden wählen

See all articles