这是我项目中的测试示例:
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>

最佳答案

应当将border:0#main删除-我什至感到惊讶,因为IE10的行为确实如此,它确实可以在Chrome中正常工作。

之后,请删除该table,我们不再生活在1999年。

07-26 09:28