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. HTTP vs HTTPS

    参考博文:HTTP与HTTPS的区别 HTTP与HTTPS的区别 一.HTTP和HTTPS的基本概念和区别 HTTP: 是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(T ...

  2. ElasticSearch API 简要介绍

    调用其API会返回很多信息,例如集群的信息,节点的信息等 检查集群的状态----Restful API说明 1:检查集群状态信息 2:管理集群 3:执行 增删改查 命令 4:执行高级命令 Restfu ...

  3. maven将依赖打入jar包

    将 依赖打入jar包,由于maven管理了所有的依赖,所以将项目的代码和依赖打成一个包对它来说是顺理成章的功能.maven的这个功能之前就用过,但这 次使用时忘了细节,只记得用maven的assemb ...

  4. ant build.xml 解释！

    Ant的概念  Make命令是一个项目管理工具,而Ant所实现功能与此类似.像make,gnumake和nmake这些编译工具都有一定的缺陷,但是Ant却克服了这些工具的缺陷.最初Ant开发者在开发跨 ...

  5. Linux下编译程序时，经常会遇到“undefined reference to XXX” 报错，

    Linux下编译程序时,经常会遇到“undefined reference to XXX” 报错, 这里总结一些可能的原因和解决方案,给需要的朋友: 说道undefined reference err ...

  6. Spring 学习 5- task 定时任务

    Spring-Task 1.这是网上的: 后面是我自己的配置 Spring3.0以后自主开发的定时任务工具,spring task,可以将它比作一个轻量级的Quartz,而且使用起来很简单,除spri ...

  7. IPv4编址及子网划分

    在讨论IP编址之前,我们需要讨论一下主机与路由器连入网络的方法.一台主机通常只有一条链路链接到网络:当主机中的IP想发送一个数据报时,它就在链路上发送,主机与物理链路之间的边界叫做接口(interfa ...

  8. Spring mvc 数据验证框架注解

    @AssertFalse 被注解的元素必须为false@AssertTrue 被注解的元素必须为false@DecimalMax(value) 被注解的元素必须为一个数字,其值必须小于等于指定的最小值 ...

  9. asp.net 中使用 pagedlist 分页并具有查询功能的实现方法

    用pagedlist在项目中做分页已N次了,今天再次用实例来实现一个带查询功能的分页例子. 1.在view代码: @using PagedList.Mvc@model BGZS.Models.User ...

  10. 按位与&、按位或|、按位异或^

    与1进行位与&运算,值保持不变: 与0进行位与&运算,值清0: 按位与&常用于将整型变量中某些位清0,而其他位保持不变. 与1进行位或|运算,值置1: 与0进行位或|运算,值保 ...