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>

测试代码下载

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

  1. css z-index属性使用过程中遇到的问题

    z-index属性在web开发中会经常使用,其主要的作用简单的说就是把元素的position设置为absolute.fixed之后,可以调节元素在文档上的层级关系.比如经常见到的dialog,mask ...

  2. css学习(1)-- 层叠样式表CSS的基础

    一.什么是CSS CSS是Cascading Style Sheets的简写,它除了可以轻松设置网页元素的显示位置和格式处,甚至还能产生滤镜,图像淡化,网页淡入淡出的渐变效果. 一个样式表由样式规则组 ...

  3. CSS的未来:一些试验性CSS属性

    尽管现代浏览器已经支持了众多的CSS3属性,但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性,如border-radius.box-shadow或者transform等.它们有良好的文档 ...

  4. 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  5. CSS書寫規範及CSS Hack

    基本原则: CSS样式可细分为3类:自定义样式.重新定义HTML样式.链接状态样式. 样式为设计师自定义的新 CSS 样式,影响被使用本样式的区域,用于完成网页中局部的样式设定. 样式名 “.”+“相 ...

  6. Normalize.css源码注释翻译&浏览器css兼容问题的理解

    版本v5.0.0源码地址: https://necolas.github.io/normalize.css/5.0.0/normalize.css 翻译版: /*! normalize.css v5. ...

  7. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

  8. java:HTML(table表格,ul列表)和CSS(导入.css文件,三种定义颜色方式,三种样式选择器,a标签属性顺序,)

    1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...

  9. 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

随机推荐

  1. destoon控制标题长度,title中显示全标题 标题字符长度怎么控制?

    如题商品调用出来后,标题的字符长度怎么控制?有哪位高手能帮我解决吗? 小弟在此感谢了. &length=30 //30表示30个字节 <!--{tag("moduleid=5& ...

  2. Constructing Roads--hdu1102

    Constructing Roads Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  3. [TYVJ] P1017 冗余关系

    冗余关系 背景 Background 太原成成中学第3次模拟赛 第4题   描述 Description Mrs.Chen是一个很认真很称职的语文老师 ......所以,当她看到学生作文里的人物关系描 ...

  4. pcduino通过USB方式刷机

    最近买了块pcduino来玩,一开始也不知道怎么入手使用,就想先学着网上来刷机,可以用TF卡来刷机,也可以用U盘来刷机.由于手上只有优盘,所以采用了第二种方式.具体方法参考了网上. 本文非原创,原文来 ...

  5. 深度学习word2vec笔记之算法篇

    深度学习word2vec笔记之算法篇 声明:  本文转自推酷中的一篇博文http://www.tuicool.com/articles/fmuyamf,若有错误望海涵 前言 在看word2vec的资料 ...

  6. 解决Sqlite UTF-8中文数据格式在DOS窗口下中文乱码

    问题如下图所示: 右键查看DOS属性:点击选项->当前代码页为GBK 只要将当前代码页编码值设置为UTF-8就可以了: ‘退出sqlite:.exit 输入:chcp 65001回车 右键属性: ...

  7. Keil C51必须注意的一些有趣特性

    Keil c51号称作为51系列单片机最好的开发环境,大家一定都很熟悉.它的一些普通的特性大家也都了解,(书上也都说有)如:因为51内的RAM很小,C51的函数并不通过堆栈传递参数(重入函数除外),局 ...

  8. Java学习系列(一)Java的运行机制、JDK的安装配置及常用命令详解

    俗话说:“十五的月亮十六圆”.那学习是不是也是如此呢?如果把月亮看成是我们的愿望,那十五便是我们所处的“高原期”,坚持迈过这个坎,我相信你的愿望终究会现实的.记得马云曾说:今天很残酷,明天更残酷,后天 ...

  9. 【转】Linux中history历史命令使用方法详解

    原文网址:http://os.51cto.com/art/201205/335040.htm 当你在玩Linux的时候,如果你经常使用命令行来控制你的Linux系统,那么有效地使用命令历史机制将会使效 ...

  10. Android_Studio 及SDK下载

    Android Studio includes all the tools you need to build apps for Android. DOWNLOAD ANDROID STUDIO 2. ...