12.FireFox下如何使连续长字段自动换行

众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入 的方法来解决

<style type="text/css">
<!--
div {
    width:300px;
    word-wrap:break-word;
    border:1px solid red;
}
-->
</style>

<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

<scrīpt type="text/javascrīpt">
/* <![CDATA[ */
function toBreakWord(el, intLen){
    var ōbj=document.getElementById(el);
    var strContent=obj.innerHTML; 
    var strTemp="";
    while(strContent.length>intLen){
        strTemp+=strContent.substr(0,intLen)+" "; 
        strContent=strContent.substr(intLen,strContent.length); 
    }
    strTemp+=" "+strContent;
    obj.innerHTML=strTemp;
}
if(document.getElementById  &&  !document.all)  toBreakWord("ff", 37);
/* ]]> */
</scrīpt>

13.为什么IE6下容器的宽度和FF解释不同呢

<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
div {
    cursor:pointer;
    width:200px;
    height:200px;
    border:10px solid red
    }
-->
</style>
<div ōnclick="alert(this.offsetWidth)">让FireFox与IE兼容</div>

问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、standards mode的相关知识,请参考:http://www.microsoft.com/china/msdn/library/webservices/asp.net/
ASPNETusStan.mspx?mfr=true

IE6,IE7,FF

IE7.0出来了，对CSS的支持又有新问题。浏览器多了，网Bpx; /*For IE7 & IE6*/   
_height:20px; /*For IE6*/

注意顺序。

这样也属于CSS HACK，不过没有上面这样简洁。   
#example { color: #333; } /* Moz */   
* html #example { color: #666; } /* IE6 */   
*+html #example { color: #999; } /* IE7 */

第二种，是使用IE专用的条件注释

<!--其他浏览器 -->   
<link rel="stylesheet" type="text/css" href="css.css" />

<!--[if IE 7]>   
<!-- 适合于IE7 -->   
<link rel="stylesheet" type="text/css" href="ie7.css" />   
<![endif]-->

<!--[if lte IE 6]>   
<!-- 适合于IE6及一下 -->   
<link rel="stylesheet" type="text/css" href="ie.css" />   
<![endif]-->

第三种，css filter的办法，以下为经典从国外网站翻译过来的。.

新建一个css样式如下：   
#item {   
    width: 200px;   
    height: 200px;   
    background: red;   
}

新建一个div,并使用前面定义的css的样式：   
<div id="item">some text here</div>

在body表现这里加入lang属性,中文为zh：   
<body lang="en">

现在对div元素再定义一个样式：   
*:lang(en) #item{   
    background:green !important;   
}

这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式：   
#item:empty {   
    background: green !important   
}    
:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。

对IE6和FF的兼容可以考虑以前的!important 个人比较喜欢用第一种，简洁，兼容性比较好。

CSS浏览器兼容问题集-第四部分的更多相关文章

  1. CSS浏览器兼容问题集-第一部分

    CSS对浏览器的兼 容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于 web2.0的过度,请尽量用xhtm ...

  2. CSS浏览器兼容问题集-第三部分

    FF与IE 1. Div居中问题 div设置 margin-left, margin-right 为 auto 时已经居中,IE 不行,IE需要设定body居中,首先在父级元素定义text-algin ...

  3. CSS浏览器兼容问题集(一）

    CSS对浏览器的兼容性有时让人非常头疼,也许当你了解其中的技巧跟原理,就会认为也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml ...

  4. CSS浏览器兼容问题集-第二部分

    11.高度不适应 高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin 或paddign 时.   例:  #box {background-color:# ...

  5. 最全的CSS浏览器兼容问题（转至http://68design.net/Web-Guide/HTMLCSS/37154-1.html）

    最全的CSS浏览器兼容问题   CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2 ...

  6. 最全的CSS浏览器兼容问题http://www.68design.net/Web-Guide/HTMLCSS/37154-1.html

    最全的CSS浏览器兼容问题 来源:68design.net 作者:邓飞飞 2008年09月23日 14:17 网友评论:7条 点击:71865 CSS 对浏览器的兼容性有时让人很头疼,或许当你了解当中 ...

  7. CSS浏览器兼容问题总结

    为什么会出现浏览器兼容问题? 由于各大主流浏览器是不同的厂家开发的,所以使用的核心也不相同,架构代码很难重合,就会产生各种各样的bug. IE6中常见的css解析bug 1)默认高度(IE6)部分块元 ...

  8. 最全的CSS浏览器兼容问题

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...

  9. CSS浏览器兼容的那些事儿

    1.文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白1px,下留白3px,op ...

随机推荐

  1. 第六章 过滤器Filter

    Filter概述 Filter不用于客户端请求,只用于对request,response进行修改或对context,session,request事件进行监听. 1.概述 如上图,多个filter组成 ...

  2. String、StringBuilder与StringBuffer的区别

    1.String类是public.final修饰的. 在Java中,被final修饰的类是不允许被继承的,并且String它的成员方法都默认为final方法. 查看源码得知,String类其实是通过c ...

  3. 对IT行业的看法和对软件工程的理解

    现在社会上IT行业的人才需求越来越大,而作为一个学软件工程的大学生,我认为IT行业是一个前景十分强大的发展方向,而且现在的社会越来越信息化,未来的生活中,电脑肯定是不可缺少的,所以我认为IT行业这是一 ...

  4. 让VS2013支持 C# 6.0 语法

    还未升级使用VS2015前,又想尝试使用C# 6.0的语言特性,可以用以下方法启用: VS2013中“工具”下选择“程序包管理器控制台”: 选中需要使用C# 6.0的项目,再敲入"Insta ...

  5. 第78天：jQuery事件总结（一）

    jQuery事件总结(一)    现在就一点一点积累自己的知识体系,记录自己学到的和自己所理解的jQuery. JavaScript和HTML之间的交互式通过用户和浏览器操作页面时引发的事件机制来处理 ...

  6. struts 普通的action

    1.使用普通方式javaBean作为Action动作类,不需要继承任何父类,也不需要实现接口. l 方法一定是public公用的, l 返回值是字符串用来决定跳转到哪个视图 l 不需要参数 l 方法名 ...

  7. 最小生成树-Borůvka算法

    一般求最小生成树的时候,最流行的是Kruskal算法,一种基于拟阵证明的贪心,通过给边排序再扫描一次边集,利用并查集优化得到,复杂度为\(O(ElogE)\).另一种用得比较少的是Prim算法,利用优 ...

  8. py2exe使用总结

    假如你用python写了个小程序,想给别人用或者给别人演示,但他电脑里没装python.wxpython等,这时候你可以试试py2exe,它是一个将python脚本转换成windows上的可执行程序( ...

  9. 创建 cachingConfiguration 的配置节处理程序时出错: 未能加载文件或

    C:\Users\xxx\Documents\IISExpress\config\applicationhost.config 将这里面带的项目路径替换成你当前路径 {"创建 caching ...

  10. 【BZOJ3105】新Nim游戏（线性基）

    [BZOJ3105]新Nim游戏(线性基) 题面 BZOJ Description 传统的Nim游戏是这样的:有一些火柴堆,每堆都有若干根火柴(不同堆的火柴数量可以不同).两个游戏者轮流操作,每次可以 ...