javascript跟css兼容性小结
日期：2014-05-17 浏览次数：20748 次
javascript和css兼容性小结
?
XHTML和HTML之间的区别
1.XHTML 元素一定要被正确的嵌套使用。
2 XHTML 文件一定要有正确的组织格式。
<html>
<head> ... </head>
<body> ... </body>
</html>
3 标签名字一定要用小写字母。
因为 XHTML文档是XML应用程序， XML 对大小写是敏感的
4 所有的 XHTML 元素一定要关闭,独立的一个标签我们也要结束用 />来结束。
5 XHTML的一些其他语法要求： 属性名字必须小写。如：
正确的代码：
<dl compact="compact">
<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
1.div的垂直居中问题
vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
1. getYear()方法
var year= new Date().getYear();
document.write(year);//ie = 2011" ff和chrome=111，因为在ff里面 getYear 返回的是 "当前年份-1900" 的值。
【兼容处理】通过 getFullYear getUTCFullYear 去调用:
var year = new Date().getFullYear();document.write(year); //2011
动态设置表单元素的float属性的区别：
var test = document.getElementById("test");
test.style.float="right";//chrome
test.style.styleFloat="right";//IE
test.style.cssFloat = "right";//FF
word-break:break-all;//div内容超过div宽度，则把文字切碎换行。
word-wrap:break-word; //配合使用 表示吧单词切断了。
min-width: 80px;
min-height: 35px;
max-width:400px;
margin-left:auto;margin-right:auto; //非IE浏览器实现居中，IE需要加上text-algin:center;
overflow:auto; //自动出现滚动条
cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A Code: <style type="text/css">
a:link {color:blue;} a:hover {color:yellow;} a:active {color:red;} a:visited {color:green;}
{margin:0;padding:0;}浏览器大都有自己的默认值，手动设置为0就能解决大部分问题
div{margin:30px!important;margin:28px;} 为了兼容FF，可以为FF提供自己的样式，使用!important,注意这两个 margin的顺序一定不能写反， important这个属性IE不能识别,
Object.style.background=
background-color:color/blue,#FFFFF;
background-image:url(images/a.jif);
background-repeat:’no-repeat/repeat-x/repeat-y/repeat;
background-attachment: scroll/fixed;
background-position: (top,left)/(23px,34px)/(12%,30%)
width:auto !important;width:100px;height:auto;max-width:400px;
非IE浏览器支持width=auto,但是IE不识别，所以使用import，同时max-width样式IE也不识别。
滤镜：
IE：filter:alpha(opacity=30,style=1)">
opacity=30 表示滤镜为30%,style有效值为 1 2 3 4
IE复杂?滤镜效果：
<div style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#3568CC', gradientType='0');
widht:100px; height:100px;"></div>
FF: opacity: .1 表示滤镜为10%（也可以写0.1）
事件兼容写法：var e = e||window.event;
Event.x的兼容性写法：var x = event.clinetX; IE and FF 等 都有
但是clientX和event.x有细微?差别，
更标的写法：Var x = event.x?event.x:event.pageX;
事件源兼容写法：(取得事件触发的dom的tagName)
var event = e ||window.event;
var srcDom = event.srcElement || event.target
alert(srcDom.tagName)
window.open()的参数and说明
channelmode=yes|no|1|0 是否使用剧院模式显示窗口。默认为 no。
directories=yes|no|1|0 是否添加目录按钮。默认为 yes。
fullscreen=yes|no|1|0 是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。
height=pixels 窗口文档显示区的高度。以像素计。
left=pixels 窗口的 x 坐标。以像素计。
location=yes|no|1|0 是否显示地址字段。默认是 yes。
menubar=yes|no|1|0 是否显示菜单栏。默认是 yes。
resizable=yes|no|1|0 窗口是否可调节尺寸。默认是 yes。
scrollbars=yes|no|1|0 是否显示滚动条。默认是 yes。
status=yes|no|1|0 是否添加状态栏。默认是 yes。
titlebar=yes|no|1|0 是否显示标题栏。默认是 yes。
toolbar=yes|no|1|0 是否显示浏览器的工具栏。默认是 yes。
top=pixels 窗口的 y 坐标。
width=pixels 窗口的文档显示区的宽度。以像素计。
注意：参数之间使用，号分隔，这个区别于样式的写法 demo：
window.open("a.htm","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400")
FF圆角： -moz-border-radius:4px，
Date对象的getDate()的兼容性写法：var y =now.getFullYear();
FF 和chrome里面 getYear 返回的是 "当前年份-1900" 的值。
给DOM对象设置属性一律使用setAttribute方法。
设置DOM对象的样式
IE和FF都支持object.className，所以可以这样写：
var myObject = document.getElementById("header");
myObject.className="classValue"
获取键盘值的兼容性写法：
<input id="txt" onkeydown="dotest(event)">
function dotest(e){
var event = e||window.event;
var code = e.which || e.keyCode;
alert(code)
}
注意：在调用dotest方法的时候需要传递event参数，而且，参数的名称必须是event
例如：<input id="txt" onkeydown="dotest(event)">
如果<input id=
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
