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. Codeforces Beta Round #6 (Div. 2 Only) 单调队列

    题目链接: http://codeforces.com/contest/6/problem/E E. Exposition time limit per test 1.5 secondsmemory ...

  2. Iterable，Iterator和forEach

    Iterable Interface Iterable<T> 方法: Iterator<T> iterator() Returns an iterator over a set ...

  3. （六）Jmeter重要组件的执行顺序及作用域

    一.Jmeter重要组件: 1)配置元件---Config Element: 用于初始化默认值和变量,以便后续采样器使用.配置元件大其作用域的初始阶段处理,配置元件仅对其所在的测试树分支有效,如,在同 ...

  4. 【php】set_include_path和get_include_path用法详解

    目的:在框架中方便加载文件 参考:http://blog.sina.com.cn/s/blog_4ce89f200100twbl.html 如果我们没有设置这个值,可能我们需要写一些完全的路径:    ...

  5. C# 事件总线 EventBus

    1. 引言 事件总线这个概念对你来说可能很陌生,但提到观察者(发布-订阅)模式,你也许就很熟悉.事件总线是对发布-订阅模式的一种实现.它是一种集中式事件处理机制,允许不同的组件之间进行彼此通信而又不需 ...

  6. Spring Cloud 架构 五大神兽的功能

    什么是微服务 微服务的概念源于2014年3月Martin Fowler所写的一篇文章“Microservices”. 微服务架构是一种架构模式,它提倡将单一应用程序划分成一组小的服务,服务之间互相协调 ...

  7. hdu-题目1421：搬寝室

    http://acm.hdu.edu.cn/showproblem.php?pid=1421 搬寝室 Time Limit: 2000/1000 MS (Java/Others)    Memory ...

  8. 【前端】JS截取字符串常用方法详细整理

    函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组 例子: str=”jpg|bmp|gif|ico|png”; arr=theString.split(”|”); //arr ...

  9. 【明哥报错簿】之【 "javax.servlet.http.HttpServlet" was not found on the Java Build Path || HttpServletRequest/HttpServletResponse cannot be resolved to a type】

    The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path login ...

  10. 英文报道：China challenged Australian warships in South China Sea, reports say

    学习地道新闻英语表达,以下文章来自CNN By Ben Westcott and Jamie Tarabay, CNN Updated 0830 GMT (1630 HKT) April 20, 20 ...