IE, firefox竖向横向滚动条处理

IE和firefox的竖向和横向滚动条处理有一些区别。下面分别进行讲解。

IE竖向滚动条

IE浏览器的竖向滚动条可以通过设置overflow-y属性来控制，有以下几种情况：

1. 自动出现滚动条：当元素的高度大于容器高度时，自动出现竖向滚动条。示例代码如下：

<div style="height: 100px; overflow-y: auto;">
    <p>这是内容1</p>
    <p>这是内容2</p>
    <p>这是内容3</p>
    <p>这是内容4</p>
    <p>这是内容5</p>
    <p>这是内容6</p>
    <p>这是内容7</p>
    <p>这是内容8</p>
    <p>这是内容9</p>
    <p>这是内容10</p>
</div>

1. 始终显示滚动条：使用overflow-y: scroll;可以强制始终显示竖向滚动条。示例代码如下：

<div style="height: 100px; overflow-y: scroll;">
    <p>这是内容1</p>
    <p>这是内容2</p>
    <p>这是内容3</p>
    <p>这是内容4</p>
    <p>这是内容5</p>
    <p>这是内容6</p>
    <p>这是内容7</p>
    <p>这是内容8</p>
    <p>这是内容9</p>
    <p>这是内容10</p>
</div>

IE横向滚动条

IE浏览器的横向滚动条需要与overflow-x配合使用。当元素的宽度大于容器宽度时，自动出现横向滚动条。

<div style="width: 100px; overflow-x: auto;">
    <p style="width: 500px;">这是内容1</p>
    <p style="width: 500px;">这是内容2</p>
    <p style="width: 500px;">这是内容3</p>
</div>

Firefox竖向横向滚动条

Firefox浏览器的竖向和横向滚动条默认不显示，需要使用-moz-scrollbars-horizontal和-moz-scrollbars-vertical属性来控制。

1. 自动出现滚动条

<div style="height: 100px; overflow: auto; -moz-scrollbars-vertical: auto;">
    <p>这是内容1</p>
    <p>这是内容2</p>
    <p>这是内容3</p>
    <p>这是内容4</p>
    <p>这是内容5</p>
    <p>这是内容6</p>
    <p>这是内容7</p>
    <p>这是内容8</p>
    <p>这是内容9</p>
    <p>这是内容10</p>
</div>

1. 始终显示滚动条

<div style="height: 100px; overflow: scroll; -moz-scrollbars-vertical: always;">
    <p>这是内容1</p>
    <p>这是内容2</p>
    <p>这是内容3</p>
    <p>这是内容4</p>
    <p>这是内容5</p>
    <p>这是内容6</p>
    <p>这是内容7</p>
    <p>这是内容8</p>
    <p>这是内容9</p>
    <p>这是内容10</p>
</div>

<div style="width: 100px; overflow: auto; -moz-scrollbars-horizontal: auto;">
    <p style="width: 500px;">这是内容1</p>
    <p style="width: 500px;">这是内容2</p>
    <p style="width: 500px;">这是内容3</p>
</div>

综上所述，不同浏览器对滚动条的处理略有不同，需要根据需要选择合适的属性设置。