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

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>