html - 浏览器滚动在 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 毫无疑问就在这里它的行为。

在那之后，请删除那个表，我们不再生活在 1999 年了。