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

从border:0中移除#main应该是这样的 - 我甚至感到惊讶，因为IE10在其行为方面毫无疑问，因此确实可以在Chrome中使用。

之后，请删除table，我们不再住在1999年了。

浏览器滚动在Internet Explorer 10中不起作用

1 个答案: