Firefox 的兼容问题

时间：2022-05-06 06:01:14

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&lpar;火狐&rpar;的不兼容问题解决方法小结 【转】http&colon;&sol;&sol;blog&period;csdn&period;net&sol;uniqer&sol;article&sol;details&sol;7789104

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

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

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

  5. WebDriver：org&period;openqa&period;selenium&period;firefox&period;NotConnectedException&colon; Unable to connect to host 127&period;0&period;0&period;1 on port 7055 after 45000 ms

    今天尝试最新的webDriver与fireFox搭配: 运行代码时出现如下的问题,但是浏览器却可以打开: org.openqa.selenium.firefox.NotConnectedExcepti ...

  6. TestNG&colon;org&period;openqa&period;selenium&period;firefox&period;NotConnectedException&colon; 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&lpar;兼容问题&rpar;错误：缺少标识符 字符串或数字的解决

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

随机推荐

  1. 在iframe父界面获取iframe里面的标签

    上一篇里边介绍了在里边利用iframe引入另一个html导航文件,有兴趣的朋友可以看一看 http://www.cnblogs.com/simba-lkj/p/6031662.html 目前遇到一些问 ...

  2. 搭建企业内部yum仓库&lpar;centos6&plus;centos7&plus;epel源&rpar;

    搭建自己的yum仓库,将自己制作好的rpm包,添加到自己的yum源中. yum仓库服务端配置如下 : 1. 创建yum仓库目录 mkdir -p /data/yum_data/cd /data/yum ...

  3. Linux下rz命令使用的实例详解

    Linux中rz命令和sz命令都可用于文件传输,而rz命令主要用于文件的上传,下面将通过几个实例来给大家详细介绍下Linux下rz命令的用法,一起来学习下吧. rz命令可以批量上传文件,当然也可上传单 ...

  4. 在C&num;中开启事务

    1.为什么要开启事务: 举一个简单的例子:在银行业务中,有一条记账原则,即又借有贷.为了保证这种原则,每发生一笔银行业务,就必须保证会计账目上借方科目和贷方科目至少个少一笔,并且这两笔要么同时成功,要 ...

  5. memcached启动参数

    memcached启动参数描述: -d :启动一个守护进程, -m:分配给Memcache使用的内存数量,单位是MB,默认是64MB, -u :运行Memcache的用户 -l :监听的服务器IP地址 ...

  6. 聊聊高并发（二十五）解析java&period;util&period;concurrent各个组件（七） 理解Semaphore

    前几篇分析了一下AQS的原理和实现.这篇拿Semaphore信号量做样例看看AQS实际是怎样使用的. Semaphore表示了一种能够同一时候有多个线程进入临界区的同步器,它维护了一个状态表示可用的票 ...

  7. &lbrack;ZJOI2015&rsqb;地震后的幻想乡

    题目传送门 SOL:不会积分的我瑟瑟发抖. 所以我选择状压DP. 我们有以下一个dp状态: f[S][i],S表示点集,i表示这个点集向外联了i条边. 那么答案就是f[(1<<n)-1][ ...

  8. Prometheus安装和配置node&lowbar;exporter监控主机

    Node_exporter是可以在* Nix和Linux系统上运行的计算机度量标准的导出器. Node_exporter 主要用于暴露 metrics 给 Prometheus,其中 metrics ...

  9. 等积投影&lpar;equal-area projection&rpar;

    等积投影(equal-area projection)是地图投影的一种,是地图上任何图形面积经主比例尺放大以后与实地上相应图形面积保持大小不变的一类投影.即投影面积与实地面积相等的投影——面积比为1. ...

  10. 使用Mechanize实现自动化表单处理

    使用Mechanize实现自动化表单处理   mechanize是对urllib2的部分功能的替换,能够更好的模拟浏览器行为,在web访问控制方面做得更全面 mechanize的特点: 1 http, ...

相关文章