IE version compatibility issue_html/css_WEB-ITnose

I have IE10 installed on my machine, and the file selection box looks like this

But I used IETester to test various IE versions, and the following effects are displayed from IE6 to IE8

It’s basically The file cannot be selected, the html code is

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

There is another problem
In IETester, the effect of IE6 and IE7 is like this

IE8 and above are normal, it should be

The html code is

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

The CSS style code is

.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;}

Reply to the discussion (solved Solution)

The second reason was found to be that display:table-cell does not support IE6 and IE7
But how should I modify the CSS code? Please help

The first question is, try to remove runat='"server" and see the effect. Or set the width through size or css width.
Second question, you have used float:left, you can set the width of li to ensure that the total width of all li (considering border, margin and other factors) is smaller than the width of the outer frame, so that it can be in one line.

Second question, if you need to dynamically and automatically set the width and height, you can download the htc file display-table.htc, and then quote the file and set the css according to the introduction on the page.

The first one I solved by using jQuery's uploadify
The second one later I found a piece of code in the 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;}
Add a div in the outer layer and set the class to ie7. As a result, both ie6 and ie7 are normal

Thank you for your suggestion

Many foreign web page templates add class="ie7" to the html node, so that there is no need to add additional layers under the existing framework.

The first one I solved by using jQuery's uploadify
The second one later I found a piece of code in the 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;}
Add a div in the outer layer and set the class to ie7. As a result, both ie6 and ie7 are normal

Thank you for your suggestion