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. 【2】学习C++之引用

    C++中的引用类似于现实生活中人们之间起昵称,昵称和本名都可以辨别人. 1.普通变量的引用: ;//a为本名 int &b=a;//b为a的昵称 其中不能光有昵称没有本名,如果只定义了引用,却 ...

  2. day 25-1 接口类、抽象类、多态

    # 接口类:python 原生不支持# 抽象类:python 原生支持的 接口类 首先我们来看一个支付接口的简单例子 from abc import abstractmethod,ABCMeta #我 ...

  3. [转]ANR问题分析指南

    引言 每天收到无数的兄弟团队的同事向系统转ANR JIRA,有些一旦遇到App ANR就直接转到系统组,有些简单看一下就转到系统组帮忙看一下.如此浩瀚的JIRA,我们什么事不做也处理不过来,请每个Ap ...

  4. Urban Elevations UVA - 221

    题目大意:给出建筑的俯视图,以及每个建筑的左下角坐标,宽度,长度,高度.求正视图可观察到的建筑的编号 思路:建筑物的可见性等于南墙的可见性,依据左下角排序后,逐个判断每个建筑是否可见.对南墙的x坐标进 ...

  5. 20165221 《网络对抗技术》EXP1 PC平台逆向破解

    20165221 <网络对抗技术>EXP1 PC平台逆向破解 一.实验内容 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函 ...

  6. windows 下 配置 github

       github   功能介绍 1. 记录多个版本 2.查看历史操作,可以进行版本回退和前进的控制 3. 多端共享代码,自动合成  Github  与  SVN   1.  SVN 版本集中管理,所 ...

  7. app个推（透传消息）

  8. SVG初尝试之path

    命令汇总 命令基本规律 移动和直线命令 弧线命令

  9. MySQL ERROR 1820 (HY000)

    You must reset your password using ALTER USER statement before executing this statement报错处理 解决方式如下: ...

  10. Android studio 常见错误修改

    一,依赖冲突 All com.android.support libraries must use the exact same version specification (mixing versi ...