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. 我是一只IT小小鸟观后感

    知道有这么一本写“码农”经历的书,是在大一下学期的第一堂职业生涯规划课上.也是抱着蛮看一看的心态在某宝上买了印刷版的开始抱着“啃”. 看了之后还是很有感触的,首先虽然现在我们是大学的软件学院中读书,但 ...

  2. Ubuntu 16.04出现：Problem executing scripts APT::Update::Post-Invoke-Success 'if /usr/bin/test -w /var/

    转自:http://blog.csdn.net/zzq123686/article/details/77454066 出现错误信息: Reading package lists... Done E:  ...

  3. Spring Security 入门详解

    序:本文主要参考 spring实战 对里面的知识做一个梳理 1.Spring Security介绍 Spring Security是基于spring的应用程序提供声明式安全保护的安全性框架,它提供了完 ...

  4. TP中模型实例化

    模型的实例化操作(重点) 模型虽然已经创建完成,但是由于模型的本质是一个类,类在使用的时候需要实例化操作. 5.1.普通实例化方法 普通实例化方法是指通过自己编写代码来new一个对象. $obj = ...

  5. SpringMVC 应知应会

    springMVC 是表现层技术,可以用来代替 struts2,下面是简略图:主要是处理器和视图,只有这两个部分需要编写代码. springMVC 三大组件:处理器映射器,处理器适配器,视图解析器. ...

  6. 第167天：canvas绘制柱状图

    canvas绘制柱状图 1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  7. HDU4701_Game

    很有意思,很好的一个题目. 题目的意思是两个人初始状态分别有A和B元,现在有N件可买的商品.两人轮流买,商品必须从左到右买过去,一次可以买若干个.第一个无法买到商品的人输. 一看就知道是博弈题目,但是 ...

  8. HDU4466_Triangle

    今天比赛做的一个题目,不过今天终于感受到了复旦题目有多坑了. 题目的意思是给你一段长为n个单位长度的直线,你可以选择任意连续单位长度的线段组成三角形,可以组成任意你可以组成任意多个三角形,且要求其中所 ...

  9. java 类型转型

  10. uoj54-bzoj3434-时空穿梭

    题意 在一个 \(n\) 维空间中,求一个点可以用一个 \(n\) 维向量 \((x_1,x_2,\dots x_n)\) 表示.现在要选出 \(c\) 个点,有三个限制: 设 \(x_i\) 表示任 ...