CSS浏览器兼容问题集(四)
来源:互联网 发布:用java编写三角形 编辑:程序博客网 时间:2024/06/06 05:38
转自:http://blog.csdn.net/u011043843/article/details/28158077
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浏览器兼容问题集(四)
- CSS浏览器兼容问题集(四)
- CSS浏览器兼容问题集
- css兼容问题(四)
- CSS浏览器兼容问题集(一)
- CSS浏览器兼容问题集(二)
- CSS浏览器兼容问题集 (三)
- CSS浏览器兼容问题集(一)
- CSS浏览器兼容问题集(二)
- CSS浏览器兼容问题集 (三)
- CSS浏览器兼容问题整理(IE6.0、IE7.0+ 与 FireFox)(四)
- CSS浏览器兼容问题
- CSS浏览器兼容问题整理
- CSS浏览器兼容问题整理
- css浏览器兼容问题
- div+css 浏览器兼容问题
- CSS浏览器兼容问题整理
- 关于css浏览器兼容问题
- web前端研发工程师
- ios即时通讯客户端开发之-mac上搭建openfire服务器
- CSS浏览器兼容问题集 (三)
- 扩展欧几里德算法
- 引力波是怎样产生的?
- CSS浏览器兼容问题集(四)
- 华为OJ_2168_字符串排序
- 易信公众平台开发从入门到精通之获取凭证
- Codeforces 439A Devu, the Singer and Churu, the Joker
- 浏览器兼容问题汇总
- ZOJ-1831
- VS08调C数据结构
- 第三十七题 求取二叉树中节点的最低公共节点
- Codeforces 439B Devu, the Dumb Guy