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. vue内置的标签（组件）

    component:用于动态组件,查看博文vue学习之组件. <component :is="componentId"></component> trans ...

  2. vscode 插件 与 技巧

    lit-html 下载量:3 万 在 JavaScript/TypeScript 的文件中,如果有使用到 HTML 标记,lit-html 提供语法高亮和相应的补全支持. Git History 下载 ...

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

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

  4. Debug Dump file

    dump file is a snapshot of the processs memeory. to debug it, we need use its corresponding executiv ...

  5. PHP常用函数大全500+

    php usleep() //函数延迟代码执行若干微秒. unpack() //函数从二进制字符串对数据进行解包. uniqid() //函数基于以微秒计的当前时间,生成一个唯一的 ID. time_ ...

  6. Python 爬虫-进阶开发之路

    第一篇:爬虫基本原理: HTTP, 爬虫基础 第二篇:环境安装与搭建: 第三篇:网页抓取:urllib,requests,aiohttp , selenium,  appium 第四篇:网页解析:re ...

  7. CentOS7.6最小化纯净版安装xfce桌面

    安装Xfce桌面环境 yum groupinstall "X Window system" yum install epel-release yum groupinstall xf ...

  8. 洛谷 P2678 & [NOIP2015提高组] 跳石头

    题目链接 https://www.luogu.org/problemnew/show/P2678 题目背景 一年一度的“跳石头”比赛又要开始了! 题目描述 这项比赛将在一条笔直的河道中进行,河道中分布 ...

  9. Windows安装redis并将redis设置成服务

    Redis 作为一种缓存工具,主要用于解决高并发的问题,在分布式系统中有着极其广泛的应用,Redis 本身是应用于 Linux/Unix 平台的(部署在服务器上边),官方并没有提供 Windows 平 ...

  10. ios访问web页面<div>点击事件不起效果，以及alert()显示url的解决办法

    ios访问web页面<div>点击不起效果,在其div上添加style=”cursor:pointer:“ jquery web页面动态append()事件调用方法:$(document) ...