css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡

时间：2022-08-26 14:59:29
pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡。
解决方法：去掉css中border-radius、 overflow其中的任意一个属性即可
具体原因不知道是什么，可能跟firefox的css渲染有关，有知道的麻烦告诉一声
 
html及css代码如下：
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

        .log {

            margin: 100px auto;

            width: 1000px;

            height: 300px;

            overflow-y: auto;

            border: 1px solid #ccc;

        }

            .log pre {

                font-family: Menlo,Monaco,Consolas,"Courier New",monospace;

                display: block;

                word-break: break-all;

                word-wrap: break-word;

                color: #333;

                font-size: 11px;

                padding: 0px;

                margin: 0px;

                border: 0px none;

                line-height: 30px;

                border-radius: 4px;

                overflow: auto;

            }

    </style>

</head>

    <body>

        <div style="width:1000px;line-height:30px;margin:100px auto;">

            pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡。<br/>

            解决方法：去掉css中border-radius、 overflow其中的任意一个属笥即可<br/>

            具体原因不知道是什么，可能跟firefox的css渲染有关吧，有知道的麻烦告诉一声

        </div>

        <div class="log">

                <pre>fefesfffffffffffffffff……………………………………………………………………</pre>

        </div>

    </body>

</html>

测试代码下载

相关文章