浏览器滚动不在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年了。