Firefox 的兼容问题
Firefox (火狐) 坑
一, css 文本溢出省略号
单行 : overflow:hidden; text-overflow:ellipsis; white-space:nowrap
多行 : overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
因为text-overflow是一个比较特殊的属性, 我们倔强的Firefox(火狐)不支持这个属性
所以我们想起他的办法了
第一个 办法就是借助 定位和:after伪类 来实现, 啥也不多说: 直接上代码实例
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
body{
font-family:Arial, Helvetica, sans-serif;/*字体。*/
font-size:12px;/*字体大小12像素。*/
}
div{
width:200px;/*层的宽度。*/
height:100px;/*层的高度。*/
line-height:24px;/*行间距。*/
position: relative;
border:#ccc solid 1px;/*层边框为1像素灰色的实线。*/
background-color:#F9F9F9;/*背景颜色*/
margin:5px; /*距离周围都是5像素*/
}
div a{
color:#;
display:block;/*定义为块级*/
width:190px;/*要显示文字的宽度*/
float:left;/*左对齐*/
overflow:hidden; /*超出的部分隐藏起来。*/
line-height: 30px;
height: 60px;
font-size: 15px;
/*white-space:nowrap;*//*不显示的地方用省略号...代替*/
padding-right:7px; /*文字距离右侧7像素。*/
text-overflow:ellipsis;/* 支持 IE */
-o-text-overflow: ellipsis; /* 支持 Opera */
background: sandybrown;
}
div a:after{
content:"...";
position: absolute;
right: 3px;
top: 30px;
}/* 支持 Firefox */
</style>
</head> <body>
<div><a href="#">CSS截取字符串d用省略号，超出用省略号用省略号用省略号代替sdfsdfdsfsdfsdfdsfdsfdsfds</a></div>
<div><a href="#">CSS截取字符串，并将超出用省略号用省略号用省略号代替</a></div>
</body>
</html>
当然还有第二种办法, 那就是借助强大的JavaScript
(function($) {
$.fn.ellipsis = function(enableUpdating){
var s = document.documentElement.style;
if (!('textOverflow' in s || 'OTextOverflow' in s)) {
return this.each(function(){
var el = $(this);
if(el.css("overflow") == "hidden"){
var originalText = el.html();
var w = el.width();
var t = $(this.cloneNode(true)).hide().css({
'position': 'absolute',
'width': 'auto',
'overflow': 'visible',
'max-width': 'inherit'
});
el.after(t);
var text = originalText;
while(text.length > && t.width() > el.width()){
text = text.substr(, text.length - );
t.html(text + "...");
}
el.html(t.html());
t.remove();
if(enableUpdating == true){
var oldW = el.width();
setInterval(function(){
if(el.width() != oldW){
oldW = el.width();
el.html(originalText);
el.ellipsis();
}
}, );
}
}
});
} else return this;
};
})(jQuery);
备注: 推荐是用第二办法, 不推荐使用 :after伪类
二, Firefox不支持margin 等于 负数
解决办法 使用 position: relative;
Firefox 的兼容问题的更多相关文章
- event对象在IE和firefox下兼容写法
由于项目需求要求只能允许用户输入数字和小数,用到了event.keycode后IE系列.chrome浏览器都无问题,在firefox下出现了event not defined的错误 原因:火狐下eve ...
- 浏览器兼容问题----Firefox不兼容event的解决方法
一.event.srcElement:当前事件的源: 在IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcE ...
- JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结 【转】http://blog.csdn.net/uniqer/article/details/7789104
1.兼容firefox的 outerHTML,FF中没有outerHtml的方法. 代码如下: if (window.HTMLElement) { HTMLElement.prototype.__de ...
- js兼容注意事项--仅供参考
做BS开发就难免会用到javascript,而每个浏览器对javascript的支持有不同.这就需要我们程序员去兼容他们,不然有些浏览器就无法运行我们的代码.就会造来客户的投诉,如果让BoSS知道了, ...
- WebDriver：org.openqa.selenium.firefox.NotConnectedException: Unable to connect to host 127.0.0.1 on port 7055 after 45000 ms
今天尝试最新的webDriver与fireFox搭配: 运行代码时出现如下的问题,但是浏览器却可以打开: org.openqa.selenium.firefox.NotConnectedExcepti ...
- TestNG:org.openqa.selenium.firefox.NotConnectedException: Unable to connect
http://blog.sina.com.cn/s/blog_68f262210102vgzj.html 今天在尝试着用TestNG写一下自动化测试用例,以前也写过,不过用的是经常封装的代码,现在完全 ...
- IE 与 FireFox 的 event 详解 （转）
原文链接 FF的FIREBUG,不仅能测试JS还能检查CSS错误,是一般常用的. 但它主要检查FF方面的错误,对IE就无能为力了. 要测试IE,就用ieTester,它可以测试IE几乎所有版本(1.0 ...
- js浏览器兼容
//window.event IE:有window.event对象 FF:没有window.event对象.可以通过给函数的参数传递event对象.如onmousemove=doMouseMo ...
- IE(兼容问题)错误：缺少标识符 字符串或数字的解决
在IE上遇到一个问题,缺少标识符 字符串或数字的解决. 问题是我的html页面在Firefox.chorme中运行正常,而在IE中老是报“缺少标识符 字符串或数字”的错误,原因: 这就是IE和Fire ...
随机推荐
- EL表达式 - 日常使用表达式记录
表达式 说明 ${field} 查找域,page ->request -> session -> application 中的值. ${field == null ? field1: ...
- mysql数据库 表 导入导出
1.导出表结构 mysqldump --no-data -h192.168.222.11 -uroot -proot --databases db01 db02 db30>file.sql 2. ...
- JUC--闭锁 CountDownLatch
CountDownLatch是一个同步辅助类,在完成一组正在其他线程中执行的操作之前,允许一个或者多个线程一直等待. 闭锁可以延迟线程的进度直到其到达终止状态,可以确保某些活动知道其他活动都完成才继续 ...
- 从头开始学JAVA[Day01]
1.Java程序的执行过程必须经过先编译,后解释两个步骤 Jvm的统一标准,具体定义了JVM的如下细节: --指令集 --寄存器 --类文件格式 --栈 --垃圾回收堆 --存储区 2.编译Java程 ...
- shiro 错误登陆次数限制
第一步:在spring-shiro.xml 中配置缓存管理器和认证匹配器 <!-- 缓存管理器 使用Ehcache实现 --><bean id="cacheManager& ...
- Asp.Net Core 项目搭建基础
很多新接触ASP.NET Core 技术的同学可能会对项目运行机制不了解,会碰到服务在哪添加?路由在哪配置?中间件怎么使用?依赖注入在哪写?诸如此类的问题.同样作为初学者,以下是本人在学习.Net技术 ...
- Typescript04---模块、命名空间
在Typescript1.5 中,内部模块称作命名空间,外部模块成为模块 一.什么是模块? 模块就是一个或一组功能模块. 模块在其自身的作用域里执行,而不是在全局作用域里.意味着,模块中的变量.函数. ...
- 【mongo】查询超时处理
使用no_cursor_timeout collection = self.db[tb_name] cols = collection.find(no_cursor_timeout=True) for ...
- SSM框架中写sql在xml文件中
第一种(用Mapper.xml映射文件中定义了操作数据库sql) 注意点: 1.#{}与${} #{}表示一个占位符,使用占位符可以防止sql注入, ${}通过${}可以将parameterType传 ...
- Centos 部署.net Core
1.安装net core框架 sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc sudo sh -c 'echo ...