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 ...
随机推荐
- 解锁技能：sass + node-sass多页面应用编译（转载）
传送门:https://blog.csdn.net/wx11408115/article/details/78023466
- python算法&二分查找法
import random def random_list(n): result = [] ids = list(range(1001,1001+n)) a1 = ["赵",&qu ...
- 2018-2019 20165221 网络对抗 Exp5 MSF基础
2018-2019 20165221 网络对抗 Exp5 MSF基础 实践内容: 重点掌握metassploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 一个主动攻击实践,如ms0 ...
- linux 查看ip地址
1.先要打开linux服务器,然后在linux桌面的空白处点击右键 2.在弹出的选项里,点击[打开终端] 3.打开linux服务器的命令终端后,输入查询linux的ip地址的命令:ifconfig - ...
- 解决 win10 新建文件夹重命名卡死的另一种方法
遇到 win10 新建文件夹重命名卡死时 根据网上的各种方法都不起作用时可以试一下这个方法. 文件夹属性 --- 自定义 --- 你想要那种文件夹 优化此文件夹 --- 把 [视频] 改成 [常规项目 ...
- Python 正则表达式 flags 参数
flags参数 re.I IGNORECASE 忽略字母大小写 re.L LOCALE 影响 “w, “W, “b, 和 “B,这取决于当前的本地化设置. re.M MULTILINE 使用本标志后, ...
- eclipse中alt+/失效的几种解决方法
1.次方法用于没有一点提示的情况:依次打开eclipse上面的windows ——preferences ——java ——editor —— content assist ,在右上方有一行“sele ...
- postgre的函数创建
语法: CREATE [OR REPLACE] FUNCTION function_name (arguments) RETURNS return_datatype AS $variable_name ...
- Net Framework 4.7.2 覆盖 Net Framework 4.5 解决办法
场景:由于c盘空间不够,本机pc又安装了 vs2013 和 vs2017 : 所以通过,github上的一个工具,把vs2013 卸载完毕,只留下vs2017: 导致问题由于项目需要net frame ...
- Scrapyd 改进第二步: Web Interface 添加 STOP 和 START 超链接, 一键调用 Scrapyd API
0.提出问题 Scrapyd 提供的开始和结束项目的API如下,参考 Scrapyd 改进第一步: Web Interface 添加 charset=UTF-8, 避免查看 log 出现中文乱码,准备 ...