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. 2018-2019-2 20165337《网络攻防技术》Exp5 MSF基础应用

    一.实践目标 1.一个主动攻击实践 ms08_067 2.一个针对浏览器的攻击 ms13-069 3.一个针对客户端的攻击 adobe (Adobe_toolbutton客户端漏洞) 4.成功应用任何 ...

  2. E: Unable to locate package clang-7 E: Unable to locate package clang++-7 E: Couldn't find any package by regex 'clang++-7'

    我的系统是Debian 9.8, 然后在装下面这两个包的时候老是提示找不到.然后再github上一问,过了几分钟就有大佬回复了,而且亲测有效 ~$ sudo apt-get -y install cl ...

  3. 微信支付errcode:40163，code been used,错误小结

    1.配置时注意,支付平台中的支付授权目录, 注意大小写. 昨天碰到的问题,就是自己跳转时,路径写的全小写.跳转支付页面也能跳转过去,但是log中总是调用两次code,报40163错误.后改成和公总号支 ...

  4. 初识中间件Kafka

    初识中间件Kafka Author:SimplelWu 什么是消息中间件? 非底层操作系统软件,非业务应用软件,不是直接给最终用户使用的,不能直接给客户带来价值的软件统称为中间件 关注于数据的发送和接 ...

  5. 算法工程师<编程题>

    <编程题> 1.[Maximum Product Subarray 求最大子数组乘积] 这个求最大子数组乘积问题是由最大子数组之和问题演变而来,但是却比求最大子数组之和要复杂,因为在求和的 ...

  6. 分布式队列神器 Celery

    Celery 是什么? Celery 是一个由 Python 编写的简单.灵活.可靠的用来处理大量信息的分布式系统,它同时提供操作和维护分布式系统所需的工具. Celery 专注于实时任务处理,支持任 ...

  7. OpenCV-Python-边缘检测

    Canny边缘检测方法被誉为边缘检测的最优方法. import cv2 import numpy as np img = cv2.imread('handwriting.jpg', 0) edges ...

  8. Eureka restTemplate访问超时

    错误代码 I/O error on GET request for "http://sushibase/v1/Publich/authorize": Connection time ...

  9. 华为指标OceanStore

    https://support.huawei.com/enterprise/zh/doc/EDOC1000086637?idPath=7919749%7C7941815%7C21430818%7C21 ...

  10. CF1065F Up and Down the Tree

    题解: 和正解方法不太一样 正解的大概意思就是先向下走可以走回来的 再走不能走回来的 能走回来的就是到这个儿子后最近的叶子可以返回的 然后这样可以O(n)计算 我自己做的时候以为这样不太能做.. 所以 ...