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 的兼容问题的更多相关文章

  1. event对象在IE和firefox下兼容写法

    由于项目需求要求只能允许用户输入数字和小数,用到了event.keycode后IE系列.chrome浏览器都无问题,在firefox下出现了event not defined的错误 原因:火狐下eve ...

  2. 浏览器兼容问题----Firefox不兼容event的解决方法

    一.event.srcElement:当前事件的源: 在IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcE ...

  3. JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结 【转】http://blog.csdn.net/uniqer/article/details/7789104

    1.兼容firefox的 outerHTML,FF中没有outerHtml的方法. 代码如下: if (window.HTMLElement) { HTMLElement.prototype.__de ...

  4. js兼容注意事项--仅供参考

    做BS开发就难免会用到javascript,而每个浏览器对javascript的支持有不同.这就需要我们程序员去兼容他们,不然有些浏览器就无法运行我们的代码.就会造来客户的投诉,如果让BoSS知道了, ...

  5. 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 ...

  6. TestNG:org.openqa.selenium.firefox.NotConnectedException: Unable to connect

    http://blog.sina.com.cn/s/blog_68f262210102vgzj.html 今天在尝试着用TestNG写一下自动化测试用例,以前也写过,不过用的是经常封装的代码,现在完全 ...

  7. IE 与 FireFox 的 event 详解 （转）

    原文链接 FF的FIREBUG,不仅能测试JS还能检查CSS错误,是一般常用的. 但它主要检查FF方面的错误,对IE就无能为力了. 要测试IE,就用ieTester,它可以测试IE几乎所有版本(1.0 ...

  8. js浏览器兼容

    //window.event   IE:有window.event对象   FF:没有window.event对象.可以通过给函数的参数传递event对象.如onmousemove=doMouseMo ...

  9. IE(兼容问题)错误：缺少标识符 字符串或数字的解决

    在IE上遇到一个问题,缺少标识符 字符串或数字的解决. 问题是我的html页面在Firefox.chorme中运行正常,而在IE中老是报“缺少标识符 字符串或数字”的错误,原因: 这就是IE和Fire ...

随机推荐

  1. 【汇编语言】DOXBox 0.74 常用debug命令

    1.查看.修改寄存器(r命令) ①-r ②-r  ax(要修改的寄存器) -:m(输入想要改成什么值) 2.查看内存单元(d命令) ①-d 查看128个内存单元内容. ②-d 段地址:偏移地址 查看指 ...

  2. 提高MYSQL大数据量查询的速度

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  3. 盒子取球C语言 蓝桥杯

    盒子取球方法二今盒子里有 n 个小球,A.B 两人轮流从盒中取球,每个人都可以看到另一个人取了多少个, 也可以看到盒中还剩下多少个,并且两人都很聪明,不会做出错误的判断. 我们约定:每个人从盒子中取出 ...

  4. 015_ICMP专项研究监控

    一.数据demo cat /proc/net/snmp Ip: Forwarding DefaultTTL InReceives InHdrErrors InAddrErrors ForwDatagr ...

  5. jmeter知识总结（一）

    Apache JMeter是一款纯java编写负载功能测试和性能测试开源工具软件.相比Loadrunner而言,JMeter小巧轻便且免费,逐渐成为了主流的性能测试工具,是每个测试人员都必须要掌握的工 ...

  6. 使用requests+pyquery爬取dd373地下城跨五最新商品信息

    废话不多说直接上代码: 可以使用openpyel库对爬取的信息写入Execl表格中代码我就不上传了 import requests from urllib.parse import urlencode ...

  7. walle2.0 nginx.conf配置文件参数

    vim /usr/local/nginx/conf #user nobody; worker_processes ; events { worker_connections ; } http{ inc ...

  8. resource links

    http://cenalulu.github.io/linux/all-about-cpu-cache/

  9. python 将png图片格式转换生成gif动画

    先看知乎上面的一个连接 用Python写过哪些[脑洞大开]的小工具? https://www.zhihu.com/question/33646570/answer/157806339 这个哥们通过爬气 ...

  10. python 项目实例

    参考:  https://blog.csdn.net/yz764127031/article/details/71522161 https://www.cnblogs.com/linuxprobe/p ...