CSS Hack: 区分 IE6 / IE7 /IE8 /Firefox

ie-firefox-hack.jpg
今天又遇到CSS问题了,还是那个Flash遮罩层错位,ie8和Firefox下正常,ie6也正常,就ie7错位了,没办法,偷个懒,用了CSS hack。为了一句CSS写多一个文件,或者在header上添加注释,那显然不是懒人的习惯做法。

selector{
property:value; /* 所有浏览器 */
property:value\9; /* 所有IE浏览器 */
+property:value; /* IE7 */
_property:value; /* IE6 */
}

当然,注意顺序。根据CSS的优先性,上面的写法,分别针对Firefox、IE8、IE7和IE6显示值。如果需要针对ie不同版本的浏览器显示,可以用IE条件注释。
<p class="ie">
<span style="display:block;display:none\9;">嘿嘿,小子竟然也用Firefox,蓝色文字。</span>
<!--[if IE 8]>不错不错,挺先进的嘛,使用IE8呢!文字是褐色的。<![endif]-->
<!--[if IE 7]>你,IE7,红色文字!<![endif]-->
<!--[if IE 6]>孩子,虽然显示的是绿色文字,不过,IE6可不是好东西呢!<![endif]-->
</p>

这里有类似的文章:
1.只用4个字符区分IE6,IE7和IE8

JS动态控制并修改flash的地址,兼容firefox和ie

    前几天在项目中遇到一个问题,就是需要动态修改flash的地址,类似QQ秀和大头贴的效果。点击图片后,在头像上动态加上一个 Flash。想起来呢,也很简单。
  代码如下:
<tr>
<td align="center"><img src="ava_bor_1.gif" /><br />
<input type="radio" name="flashradio" id="radio1" value="avator_01.swf" /></td>
 <td align="center"><img src="ava_bor_2.gif"/><br />
<input type="radio" name="flashradio" id="radio2" value="avator_02.swf" /></td>
<td align="center"><img src="ava_bor_3.gif" /><br />
<input type="radio" name="flashradio" id="radio3" value="avator_03.swf" /></td>
<td align="center"><img src="ava_bor_4.gif" /><br />
<input type="radio" name="flashradio" id="radio4" value="avator_04.swf" /><br /></td>
</tr>
我的浏览器是IE8和Firefox3.6.12,使用了jQuery来实现
<script>
 $(function(){
$(":radio").click(function(){
alert($(this).val());
$("object[type='application/x-shockwave-flash']").attr("data",$(this).val());//火狐下修改Flash地址
alert($("embed").attr("src")); //获取当前flash地址
$("embed").attr("src",$(this).val());//ie下修改
})
});
</script>
然而诡异的是这个代码在火狐下工作正常,在IE下却是无论如何都无效,可以获取地址,但无法修改地址。换了几种写法仍然如此。马上到其他网站参考了别人的写法。我看了下UC的写法,很晕。

阅读剩余部分...

打造自己的reset.css

0,引言
每每有新项目,第一步就是应当使用一个reset.css来重置样式。滥用不如不用,直接拿个现成的reset.css过来将导致后期各种离奇bug的发生。所以最好还是自己写一个reset.css,并且要明白每一条reset都是用来做什么的。reset.css本意就是重置样式,我始终建议把.clearfix放入layout.css,而把h1、h2之类的定义放进typography.css。 具体如何规划网站CSS结构,不在文本讨论之列,可以参考Smashing Magazine上的文章,国内有差强人意的中文译版。注意,本文把reset分成了两个部分,一个是纯reset.css,可以用于任何项目。另一个是用于特定项目的“reset”,自定义修改的内容,这些内容可以放在layout.css、typography.css之类的文件中,他们共同导入到一个base.css形成一个项目的基础样式。本文就是来介绍如何写一个合适所有项目的通用的reset.css,以及介绍在设置玩reset.css之后需要针对不同项目要首先要设置的内容。

阅读剩余部分...

【总结】IE和Firefox的Javascript兼容性总结

长久以来JavaScript兼容性一直是Web开发者的一个主要问题。在正式规范、事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬。为此,主要从以下几方面差异总结IE和Firefox的Javascript兼容性:

  一、函数和方法差异

  二、样式访问和设置

  三、DOM 方法及对象引用

  四、事件处理

  五、其他差异的兼容处理

一、函数和方法差异

1. getYear()方法

【分析说明】先看一下以下代码:


var year= new Date().getYear();
document.write(year);

  在IE中得到的日期是"2010",在Firefox中看到的日期是"110",主要是因为在 Firefox 里面 getYear 返回的是 "当前年份-1900" 的值。

【兼容处理】

  加上对年份的判断,如:


var year= new Date().getYear();
year
= (year<1900?(1900+year):year);
document.write(year);

  也可以通过 getFullYear getUTCFullYear 去调用:


var year = new Date().getFullYear();
document.write(year);

2. eval()函数

【分析说明】在IE中,可以使用eval("idName")或getElementById("idName")来取得id为idName的 HTML对象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象。

【兼容处理】统一用getElementById("idName")来取得id为idName的HTML对象。

3. const声明

【分析说明】在 IE 中不能使用 const 关键字。如:


const constVar = 32;

在IE中这是语法错误。

【兼容处理】不使用 const ,以 var 代替。

4. var【分析说明】请看以下代码:


echo=function(str){
document.write(str);
}

判断浏览器类型。

3. 访问和设置class属性


【分析说明】同样由于class是Javascript保留字的原因,这两种浏览器使用不同的 JavaScript 方法来获取这个属性。


IE8.0之前的所有IE版本的写法:


var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");

适用于IE8.0 以及 firefox的写法:


var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");

  另外,在使用setAttribute()设置Class属性的时候,两种浏览器也存在同样的差异。

  setAttribute("className",value);

  这种写法适用于IE8.0之前的所有IE版本,注意:IE8.0也不支持"className"属性了。

  setAttribute("class",value);适用于IE8.0 以及 firefox。


【兼容处理】


方法一,两种都写上:


var myObject = document.getElementById("header");
myObject.setAttribute(
"class","classValue");
myObject.setAttribute(
"className","classValue");
 //设置header的class为classValue

方法二,IE和FF都支持object.className,所以可以这样写:


var myObject = document.getElementById("header");
myObject.className
="classValue";//设置header的class为classValue

方法三,先判断浏览器类型,再根据浏览器类型采用对应的写法。

4. 对象宽高赋值问题


【分析说明】FireFox中类似 obj.style.height = imgObj.height 的语句无效。

【兼容处理】统一使用 obj.style.height = imgObj.height + ‘px’;

阅读剩余部分...

    Page :
  1. 1