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 ...
随机推荐
- Access-Control-Allow-Origin设置跨域
我来自己写一下答案,以给后来的朋友一点思路和建议:1,首先把Access-Control-Allow-Origin设置成*是不妥的,自己的接口服务器不能允许所有人都可以访问.2,具体哪里可以设置Acc ...
- 防盗链之URL参数签名
一.概述 传统的 IP 禁用.referer 防盗链.User-Agent 防盗链.地区访问控制等防盗链措施已经无法完全满足用户要求,所以开发出URL参数签名方式来防盗链 二.实现 Token防盗链是 ...
- codeforces 813E 主席树
题意: 一个数列多组询问,每次询问[l,r]中最多能选多少个数字,其中每个数字的出现次数不超过k次 题解: 我们保存对于每个位置上,出现超过k次的位置,那么对于每次询问,我们就变成了查询区间[l,r] ...
- 【easy】671. Second Minimum Node In a Binary Tree
Given a non-empty special binary tree consisting of nodes with the non-negative value, where each no ...
- VUE 父组件与子组件交互
1. 概述 1.1 说明 在项目过程中,会有很多重复功能在多个页面中处理,此时则需要把这些重复的功能进行单独拎出,编写公用组件(控件)进行引用.在VUE中,组件是可复用的VUE实例,此时组件中的dat ...
- SecureCRT标签显示IP地址
当使用SecureCRT连接到linux服务器后,SecureCRT的标签会随着操作目录的改变而改变,当连接多个的时候很不好区分,所以需要设置标签栏固定显示IP地址信息. options->Se ...
- PDF怎么旋转页面，只需几步轻松搞定！
有时候我们下载一个PDF文件里面有页面是旋转的情况,用手机看的时候可以把手机旋转过来看,那么用电脑的时候总不可能也转过来看吧,笔记本是可以的台式的是不行的,这个时候我们就需要把PDF文件中旋转的页面转 ...
- MIUI9系统怎么卡刷开发版获取ROOT超级权限
小米的设备不同手机型号一般情况下官方网站都提供两个不同的系统版本,大概可分为稳定版和开发版,稳定版没有提供ROOT权限管理,开发版中就支持了ROOT权限,很多情况下我们需要使用的一些功能强大的工具,都 ...
- spring boot+mybatis+quartz项目的搭建完整版
1. 利用spring boot提供的工具(http://start.spring.io/)自动生成一个标准的spring boot项目架构 2. 因为这里我们是搭建spring boot+mybat ...
- Spring Boot 整合Quartz定时器
概述 项目需要定时器的调度管理,原来使用Spring Boot自带的定时器,但是不能后台动态的操作暂停.启动以及新增任务等操作,维护起来相对麻烦:最近研究了Quartz的框架,觉得还算不错,整理了一下 ...