瀏覽器滾動不在Internet Explorer中工作10

Question

下面是從我的項目的測試例如： http://jsfiddle.net/g6aAd/6/

當選項卡內容很長，瀏覽器滾動並不在Internet Explorer中工作10

請指教如何解決它。

CSS

* { 
    margin: 0; 
    padding: 0; 
} 

head, body { 
    height: 100%; 
} 

body { 
    background: #fff; 
} 

#main { 
    background: #888; 
    position: absolute; 
    top: 25px; 
    bottom: 0px; 
    width: 100%; 
} 

#head { 
    background: #f8f; 
    position: absolute; 
    width: 100%; 
    height: 25px; 
} 

#left { 
    background: #ff8; 
    position: absolute; 
    bottom: 0px; 
    width: 250px; 
    height: 100%; 
} 

#right { 
    background: #8f8; 
    margin-left: 250px; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    height: 100% !important; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

@media (max-width: 767px) { 
    body { 
     padding-left: 0px !important; 
    } 
} 

.tab-content .well { 
    margin-bottom: 0px; 
} 

HTML

<div id='head'></div> 
<div id='main'> 
    <div id='left'></div> 
    <div id='right'> 
     <table style="height:100%;width:100%"> 
      <tr> 
       <td style="width:100%;"> 
        <ul class="nav nav-tabs" > 
         <li class="active" style="cursor: pointer;"> 
          <a>Tab #1</a> 
         </li> 
         <li style="cursor: pointer;"> 
          <a>Tab #2</a> 
         </li> 
         <li style="cursor: pointer;"> 
          <a>Tab #3</a> 
         </li> 
         <li style="cursor: pointer;"> 
          <a>Tab #4</a> 
         </li> 
         <li style="cursor: pointer;"> 
          <a>Tab #5</a> 
         </li> 
         <li style="cursor: pointer;"> 
          <a>Tab #6</a> 
         </li> 
         <li style="cursor: pointer;"> 
          <a>Tab #7</a> 
         </li> 
        </ul> 
       </td> 
      </tr> 
      <tr style="height:100%"> 
       <td style="height:100%;vertical-align:top;"> 
        <div class="tab-content" style="overflow: visible;height:calc(100% - 58px);"> 
         <div class="tab-pane active" style="height: 100%; overflow: hidden;"> 
          <div class="well" style="height: 100%;"> 
           <h1> 
            These excellant intentions were strengthed when he enterd the Father Superior's diniing-room, though, stricttly speakin, it was not a dining-room, for the Father Superior had only two rooms alltogether; they were, however, much larger and more comfortable than Father Zossima's. 
            <br /> 
            <br /> 
            But tehre was was no great luxury about the furnishng of these rooms eithar. The furniture was of mohogany, covered with leather, in the old-fashionned 
            <br /> 
            <br /> 
            These excellant intentions were strengthed when he enterd the Father Superior's diniing-room, though, stricttly speakin, it was not a dining-room, for the Father Superior had only two rooms alltogether; they were, however, much larger and more comfortable than Father Zossima's. 
            <br /> 
            <br /> 
            But tehre was was no great luxury about the furnishng of these rooms eithar. The furniture was of mohogany, covered with leather, in the old-fashionned 
            <br /> 
            <br /> 
            These excellant intentions were strengthed when he enterd the Father Superior's diniing-room, though, stricttly speakin, it was not a dining-room, for the Father Superior had only two rooms alltogether; they were, however, much larger and more comfortable than Father Zossima's. 
            But tehre was was no great luxury about the furnishng of these rooms eithar. The furniture was of mohogany, covered with leather, in the old-fashionned 
            <br /> 
            <br /> 
           </h1> 
          </div> 
         </div> 
        </div> 
       </td> 
      </tr> 
     </table> 
    </div> 
</div> 

Answer 1

從#main刪除border:0因爲它應該是 - 我甚至驚訝這樣做工作按預期在Chrome，因爲IE10是毫無疑問就在這裏它的行爲。

之後，請刪除那個table，我們現在不再生活在1999年了。