最近遇到的css hack和一些笔记 (更新中...)

 

1.

color:red; /* 所有浏览器都支持 */

_color:red; /* IE6支持 */

*color:red; /* IE6、IE7支持 */

*+color:red; /* IE7支持 */

color:red/9; /* IE6、IE7、IE8支持 */

color:red/0; /* IE8支持 */

body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

2.

 

<meta http-equiv="x-ua-compatible" content="ie=7" />

把这段代码放到<head>里面,在ie8里面的页面解析起来就跟ie7一模一样的了

3.

 

ie6有时候列表图标要鼠标点击或移动过去才显示;

给li列表加zoom:1或position:relative;

4.

 

window.parent 是iframe页面调用父页面对象

javascript 刷新父页面:

window.opener.document.location.reload(); 

5.

 

使用DD_belatedPNG解决IE6下PNG半透明问题,只需要一个理由,就是它支持backgrond-position与background-repeat.

http://dillerdesign.com/experiment/DD_belatedPNG/#download

6.

 

使用DD_roundies解决ie圆角问题

http://dillerdesign.com/experiment/DD_roundies/

7.

 

IE6有一个 bug,它每次都从服务器端读取背景图片,结果就是,若服务器反应较慢hover效果就会出现短暂的空白

随便在页面中哪个位置(head、body或者onload)调用下面提及的脚本,例如:

<!--[if IE 6]>   

 <script type="text/javascript">

        document.execCommand("BackgroundImageCache", false, true);

    </script> 

<![endif]-->

8.

 

加载flash

adobe提供的脚本

<script src="../js/AC_RunActiveContent.js" type="text/javascript"></script>

在需要显示flash的地方加入下面脚本,将flash路径改下就ok了。

这个脚本根据不同的浏览器用不同的标签显示flash(如object/embed).

用这个脚本主要是为了解决flash加载时要点击一次才能进行交互

<script type="text/javascript">

                AC_FL_RunContent('codebase','https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','736','height','145','src','images/games_<%=localeString%>','flashvars','lagStr=<%=localeString%>','quality','high','wmode','transparent','pluginspage','https://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/games_<%=localeString%>');

            </script>

9.

 

用slideToggle()时发现

在IE8下margin有时失效,开始以为是jquery问题,后来发现是IE8的bug.

 

综合几个解决方案:

1.给父DIV加个看不见的边框

2.给父DIV设个:overflow:hidden或overflow:auto

3.把margin去掉换成底色的border,如margin-top:8px 换成border-top:8px solid #xxx;

3.给消失margin的标签加上浮动,比如float:left;

4.在消失margin-top的标签前面加个空的标签如<div></div>,或者用一个空的div将消失margin的标签包裹起来;或者用一个空的div将消失margin标签之前的内容包裹起来。

 

 

10.

 

filter:fliph 内容翻转

filter:gray 内容变灰

 

 

 

11.wordpress感觉很不错。

 

12.google jquery 引用:
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

 

13.good UI

http://www.position-absolute.com/articles/jquery-fade-and-slide-toggle-plugin/
http://www.jxwinter.cn/index.php/archives/tag/ie6

http://www.cssmania.com/

 

14. forum

http://www.css-js.com

http://bbs.51cto.com/forum-137-1.html
http://forum.csdn.net/SList/CrossBrowser

 

15.question
有A页面 通过jquery的dialog和iframe加载B页面 而B页面也以同样的方法加载C页面 但B页面打开的dialog却限定在了B窗口中
请问如何让C页面所在的dialog跳出B页面?

 

16.

offsetHeight clientHeight
http://www.cftea.com/c/751.asp

 

17. 源码分析

http://www.zhangjingwei.com/

 

18.useful

http://www.web600.net/html/editor/JavaScript/201008183953.html

 

 

19.addEvent是怎样诞生的 

http://flyzonemu.javaeye.com/blog/326582 

 

 20.IE6 a:hover span bug

可以参考http://www.w2blog.net/view/353.html

或者 a:hover{ position:relative;}

a:hover span{position:absolute; width:20px; height:20px; display:block;}

 

21. 比较好的技术ebook下载

http://ajava.org/book/

 

22.很好的loading...在线图片生成

http://preloaders.net/en/horizontal

 

23.jquery 简易插件实例

http://www.cnblogs.com/JustinYoung/archive/2010/03/30/jquery-chajian.html

 

24.15个javascript web ui 库

http://news.csdn.net/a/20100519/218442.html

 

25.IE6下position:fixed。可惜页面有position:relative或absolute时全部变成fixed;不怎么好。IE8下遮罩层,当页面很长很长时会出现页面底部没有遮罩层,这是IE8的Bug,这时可以用position:fixed试试解决这个问题。

http://www.happinesz.cn/archives/991/

 

26.比较基础详细的javascript/css/ajax

http://www.web666.net/dom/cancelBubble.html

 

27.浏览器的两种模式

浏览器的两种模式quirks mode 和strict mode

http://kino.javaeye.com/blog/241260

 

28.w3help正在...:

http://www.w3help.org/zh-cn/

 

29.一个drag的例子:

http://www.koyoz.com/blog/?action=show&id=80

 

30.几个很容易弄混的概念:

obj.offset[Width|Height|Top|Left]  取控件相对于父控的位置
event.offset[X|Y] 取鼠标相对触发事件的控件中的坐标
event.screen[X|Y] 鼠标相对于屏幕坐标
event.client[X|Y]   鼠标相对于网页坐标
obj.scroll[Width|Height|Top|Left] 获取对象滚动的大小
obj.client[Width|Height|Top|Left] 获取对象可见区域的大小

解释一下event.X和event.clientX有什么区别?

event.clientX返回事件发生时,mouse相对于客户窗口的X坐标
   event.X也一样
   但是如果设置事件对象的定位属性值为relative
   event.clientX不变
   而event.X返回事件对象的相对于本体的坐标
   event对象详解 ICOOE 2000.3.31 http://www.51js.com/
   event代表事件的状态,例如事件发生的的元素、鼠标的位置等等,event对象只在事件过程中才有效。

 

31.几个Event属性:

altKey
   检索ALT键的当前状态
   可能的值 true为关闭
   false为不关闭
   
   button
   检索按下的鼠标键
   可能的值: 0 没按键
   1 按左键
   2 按右键
   3 按左右键
   4 按中间键
   5 按左键和中间键
   6 按右键和中间键
   7 按所有的键
   
   cancelBubble
   设置或检索当前事件是否将事件句柄起泡
   可能的值: false 启用起泡
   true 取消该事件起泡
   
   clientX
   检索与窗口客户区域有关的鼠标光标的X坐标,属性为只读,没有默认值。
   
   clientY
   检索与窗口客户区域有关的鼠标光标的Y坐标,属性为只读,没有默认值。
   
   ctrlKey
   ctrlKey 检索CTRL键的当前状态
   可能的值 true为关闭
   false为不关闭
   
   dataFld
   检索被oncellchange事伯影响的列
   
   aTransfer
   为拖放操作提供预先定义的剪贴板式。
   
   Element
   检索在on mouseover和on mouseout事件期间退出的对象指针
   
   keyCode
   设置或检索与引发事件的关键字相关联的Unicode关键字代码
   该属性与onkeydown onkeyup onkeypress一起使用
   如果没有引发事件的关键字,则该值为0
   
   offsetX
   检索与触发事件的对象相关的鼠标位置的水平坐标
   
   offsetY
   检索与触发事件的对象相关的鼠标位置的垂直坐标
   
   propertyName
   检索在对象上己更改的特性的名称
   
   reason
   检索数据源对象数据传输的结果
   可能的值:
   0 数据传输成功
   1 数据传输失败
   2 数据传输错误
   
   recordset
   检索数据源对象中默认记录集的引用
   该特性为只读
   
   repeat
   检索一个事件是否被重复
   该属性只有在onkeydown事件重复时才返回true
   
   returnvalues
   设置或检索从事件中返回的值
   可能的值:
   true 事件中的值被返回
   false 源对象上事件的默认操作被取消
   
   screenX
   检索与用户屏相关的鼠标的水平位置
   
   screenY
   检索与用户屏相关的鼠标的垂直位置
   
   shiftKey
   检索shiftKey键的当前状态
   可能的值 true为关闭
   false为不关闭
   
   srcElement
   检索触发事件的对象
   
   srcFilter
   检索导致onfilterchange事件触发的过滤器对象
   
   srcUm
   检索触发事件行为的同一资源名称
   除非下面两个条件都为真,否则该特性被设置为null
   1.行为被附加到触发事件的要素上
   2.在前面的项目符号中定义的行为己指定了一个URN标识符和己触发的事件
   
   toElement
   检索作为on mouseover或者on mouseout事件结果而移动的对象
   
   type
   检索事件对象中的事件名称
   
   x
   检索相对于父要素鼠标水平坐标的整数
   
   y
   检索相对于父要素鼠标垂直坐标的整数

 

32.

计算网页内容的宽与高
http://www.javaeye.com/topic/563999

jQuery–20个最新的jQuery效果:
http://www.cssrain.cn/?p=1430

jquery 源码分析
http://www.zhangjingwei.com/archives/jquery-analysis-code-1/

 

33.省略号:

ellipsis:
 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;
 -o-text-overflow:ellipsis;
 -moz-binding: url('ellipsis.xml#ellipsis');
 width:100px;

xml:

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"><binding id="ellipsis"><content><xul:window><xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description></xul:window></content></binding></bindings>

34.

wijmo(基于jquery ui)
http://wijmo.com/

35.

网页常用js代码收集
http://www.cnblogs.com/lushuicongsheng/archive/2010/11/10/1874447.html1

 

36.zen-coding:
http://www.appinn.com/zen-coding/
downlist:http://code.google.com/p/zen-coding/downloads/list

 

37.小众软件:
http://www.appinn.com/

 

38.Free Image Convert And Resize (图片批量转换和调整大小) V2.0.8.5 多国语言免费
http://www.xiazaiba.com/word/Free+Image+Convert

 

39.canvas 教程
https://developer.mozilla.org/cn/canvas_tutorial

 

40.css优先级别:
id选择器>类选择器>标签选择器
important>内联样式(style="color:red")

41.desktop

http://desktop.sonspring.com/

42.去掉虚线框:

 

非IE:outline:none;

IE:在标签里面加属性HideFocus

 

 

43.前端网站

http://www.js8.in/

http://www.aoao.org.cn/blog/

http://www.silverna.org/blog/

http://bbs.51js.com/viewthread.php?tid=88174

http://uicss.cn/

http://css9.net/

http://www.css88.com/

http://www.the6cn.com/web/javascript/index.shtml

http://www.qianduan.net

 

 

44.chrome 字体小于11像素的问题:

加上-webkit-text-size-adjust:none;

 

45.wmode=opaque 参数可以是FLASH位于最低,无法挡住下拉菜单,并且还能提高FLASH帧速

FALSH透明的参数为:wmode=transparent

 

46.在线编辑调试工具

http://jsfiddle.net/

 

47.onchange,onpropertychange,oninput的区分:

参考:http://hi.baidu.com/yljf184/blog/item/98df82df71fc731f62279876.html

onpropertychange(ie专有)

oninput(非IE)

 

48.闭包

http://www.cnblogs.com/jeffwongishandsome/archive/2009/05/17/1458405.html

(主要从事.net平台下的web开发工作,对服务端和前端编程都有浓厚的兴趣)

 

49.SWFObject is better than ac_ranActieContent

 

50.阻止冒泡/浏览器默认行为

if(e && e.stopPropagation){

     e.stopPropagation();

}

else{

    window.event.cancelBubble = true;

    return false;

}

//

if(e && e.preventDefault){

    e.preventDefault();

}else{

    window.event.returnValue = false;

    return false;

}

 

51.获取offsetLeft/offsetTop的值

var x=0,y=0;

while(obj && obj.offsetParent){

x += obj.offsetLeft;

        y += obj.offsetTop;

obj = obj.offsetParent;

}

52. 获取样式表的样式

return obj.currentStyle || document.defaultView.getComputeStyle(obj,null);

 

53.Object.prototype.extend (参考http://www.cnblogs.com/5201314/archive/2009/05/22/1487213.html)

Object.extend = function(a,b){

for(var a in b){

a[i] = b[i];

}

return a;

}

 

54.设置或返回一个窗口的内容区域的内部高度(参考http://help.dottoro.com/ljknuajj.php)

在IE下:document.documentElement.clientHeight

在其它浏览器下:window.innerHeight

 

55.trigger操作

function fireEvent(element,event){

     if (document.createEventObject){

         // dispatch for IE

         var evt = document.createEventObject();

         return element.fireEvent('on'+event,evt)

     }

     else{

         // dispatch for firefox + others

         var evt = document.createEvent("HTMLEvents");

         evt.initEvent(event, true, true ); // event type,bubbling,cancelable

         return !element.dispatchEvent(evt);

     }

 }

56.改变选择的文字的背景颜色
<style type="text-css">
::-moz-selection { background:#f50; color:#fff;} // FF私有属性
::selection { background:#f50; color:#fff;} //其他非IE标准浏览器
</style>
57.JavaScript颜色转换的核心
JavaScript颜色转换的核心就是进制间的转换。RGB格式其实就是十进制表示法,所以,十六进制颜色与RGB颜色的转换就是十六进制与十进制之间的转换。
十六进制转换为十进制相对容易些,核心代码如下示例:parseInt("0xFF"),其结果就是255,”0x”就表明当前是16进制,由于parseInt后面无参数,默认就是转换为10进制了。
十进制转换为16进制,核心代码如下:var num=255; num.toString(16);,其结果是FF。”16″表示数值转换为16进制字符串。
58、方法集锦 
(1. οncοntextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键
<table border οncοntextmenu=return(false)><td>no</table> 可用于Table
(2. <body onselectstart="return false"> 取消选取、防止复制
(3. οnpaste="return false" 不准粘贴
(4. οncοpy="return false;" oncut="return false;" 防止复制
(5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标
(6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标
(7. <input style="ime-mode:disabled"> 关闭输入法
(8. 永远都会带着框架
<script language="javascript"><!--
if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页
// -->
(9. 防止被人frame
<SCRIPT LANGUAGE=javascript><!-- 
if (top.location != self.location)top.location=self.location;
// --></SCRIPT>
(10. <noscript><iframe src=*.html></iframe></noscript> 网页将不能被另存为 
59.html5(canvas)
http://js1k.com   canvas games
http://forum.livetome.cn/thread-8588-1-1.html
http://www.html5.jp/  
http://paranimage.com/html-5-canvas-tutorials-and-examples/
60.faststone:(很好用的绿色抓图软件)
FastStone Capture 6.7 
http://www.newhua.com/soft/44264.htm
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值