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


    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="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>

    测试代码下载

  • 相关阅读:
    TC Asia Competition
    Codeforces 258 Div2
    斯坦纳树
    <算法竞赛入门经典> 第8章 贪心+递归+分治总结
    UVALive 6602 Counting Lattice Squares
    UVALive 6609 Minimal Subarray Length (查找+构建排序数组)
    vue中路由以及动态路由跳转
    sublime安装
    js数组转对象
    如何将变量做为一个对象的key,push进一个数组?
  • 原文地址:https://www.cnblogs.com/junjieok/p/4506018.html
Copyright © 2020-2023  润新知