浏览器常见兼容点

window.event
问题：
使用 window.event 无法在FF上运行
解决方法：
FF的 event 只能在事件发生的现场使用，此问题暂无法解决。可以把 event 传到函数里变通解决：
onMouseMove = "functionName(event)"
function functionName (e) {
    e = e || window.event;
    ......
}

event.x 与 event.y 问题在IE中，event 对象有x,y属性，FF中没有
解决方法：
在FF中，与 event.x 等效的是 event.pageX ，但event.pageX IE中没有
故采用 event.clientX 代替 event.x ，在IE中也有这个变量
event.clientX 与 event.pageX 有微妙的差别，就是滚动条
要完全一样，可以这样：
mX = event.x ? event.x : event.pageX;
然后用 mX 代替 event.x


clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。 客户区指的是当前窗口。
标准是event.clientX

引申： 其他的常用东东    event.ScreenX 返回鼠标指针相对于屏幕的坐标以及offsetY

注意event.originalEvent的使用


  [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

这些对象在Jquery中呢？


  [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

注意：offset（）和position（）的区别。offset（）得到按正规文档流排列的元素距离page的坐标（left，top值）。

position（）得到的是该元素实际显示的距离page的坐标（可能结果margin，padding，left，top等css相对原位置的修改）

 

jquery的event对象
    * 。target   这个反应触发事件的DOM对象，可以在事件冒泡的时候判断是否是事件源头(compare event.target to 
this) 
    * .pageX:  鼠标的left属性，相对于page 
    * .pageY:  鼠标的top属性，相对于page 
    * preventDefault():  这个方法被调用，则原有事件就被忽略。（例如 clicked link就不会去新的Url了） 
    * stopPropagation():让Jquery停止事件冒泡 
    * .Data:  如果事件中还有EventData你就可以用这个属性获得对应Eventdata数据了。 
    * ctrlKey: 类型: Boolean, 说明: Ctrl 键是否按下 
    * shiftKey: 类型: Boolean, 说明: Shift键是否按下 
    * altKey: 类型: Boolean, 说明: Alt 键是否按下 
    * charCode: 类型: Number, 说明: 最后响应键盘按键的 charCode 值 
    * keyCode: 类型: Number, 说明: 最后响应键盘按键的 keyCode 值 
    * button: 类型: Number, 说明: 按下的鼠标键, 左键:1, 右键:2, 中键:4 
    * which: 类型: Number, 说明: 最后响应的是哪个按键, 如果是键盘按键则等于 charCode || keyCode; 如果是鼠标按 
键, 左键:1, 右键:3, 中键2 
type : 事件类型 
relatedTarget:对于鼠标事件, 标示触发事件时离开或者进入的DOM元素 
currentTarget:冒泡前的当前触发事件的DOM对象, 等同于this. 
result: 上一个事件处理函数返回的值 
screenX/Y:对于鼠标事件, 获取事件相对于屏幕原点的水平/垂直坐标

 

注册事件


  [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

取消事件

if(isIE){
	var event=window.event;
	event.returnValue=false;
}
else
	event.preventDefault();

取消事件冒泡

var event=event || window.event;
if(isIE)
	event.cancelBubble=true;
else
	event.stopPropagation();

div类

1. 居中问题
div里的内容，IE默认为居中，而FF默认为左对齐
可以尝试增加代码margin:auto

2. 高度问题
两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间
所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是 height:100%;
但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是：
.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

3. clear:both;
不想受到float浮动的，就在div中写入clear:both;

4. IE浮动 margin 产生的双倍距离
#box {
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}

5. padding 问题
FF设置 padding 后，div会增加 height 和 width，但IE不会 （* 标准的 XHTML1.0 定义 dtd 好像一致了）
高度控制恰当，或尝试使用 height:100%;
宽度减少使用 padding
但根据实际经验，一般FF和IE的 padding 不会有太大区别，div 的实际宽 = width + padding ，所以div写全 width 和 padding，width 用实际想要的宽减去 padding 定义

6. div嵌套时 y 轴上 padding 和 marign 的问题
FF里 y 轴上 子div 到 父div 的距离为 父padding + 子marign
IE里 y 轴上 子div 到 父div 的距离为 父padding 和 子marign 里大的一个
FF里 y 轴上 父padding=0 且 border=0 时，子div 到 父div 的距离为0，子marign 作用到 父div 外面

7. padding，marign，height，width 的傻瓜式解决技巧
注意是技巧，不是方法：
写好标准头
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div
宽尽量用margin，慎用padding，width算准实际要的减去padding

列表类

1. ul 标签在FF中默认是有 padding 值的，而在IE中只有margin有值
先定义 ul {margin:0;padding:0;}

2. ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成: {list-style:none;margin:0px;padding:0px;}

显示类

1. display:block,inline 两个元素
display:block; //可以为内嵌元素模拟为块元素
display:inline; //实现同一行排列的的效果
display:table; //for FF,模拟table的效果
display:block 块元素，元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
<div>，<p>，<h1>，<form>，<ul> 和 <li> 是块元素的例子
display:inline 就是将元素显示为行内元素，元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
<span>，<a>，<label>，<input>，<img>，<strong> 和 <em> 是 inline 元素的例子


position的fixed属性


  [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
2. 鼠标手指状显示
全部用标准的写法 cursor: pointer;

背景、图片类

1. background 显示问题
全部注意补齐 width，height 属性

2. 背景透明问题
IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
IE: filter: alpha(opacity=10);
FF: opacity:0.6;
FF: -moz-opacity:0.10;
最好两个都写，并将opacity属性放在下面

posted @ 2010-03-15 10:34  MyCoolDog  阅读(309)  评论(0)  编辑  收藏  举报