浩堂之轩

我欲所求,我欲所欲?一人一隅,自在之地。

(整理)网页设计的JS/CSS兼容、技巧

来自:AngusYoung 日期:2006-1-4 7:41:50 阅读量: 回复数:

[2010年4月2日更新]

整理本人在设计上常用到的HACK、颜色、样式,也收集部分从网上收集来的认为不错的DD,不定期更新。

“淡淡的就很漂亮”

  • 浅色配色方案

    浅色的配色方案,感觉很好,看起来很舒服。

  • 清新搭配

    蛮清新蛮舒服的搭配

技巧与备忘

  1. 关于BOX的实际宽度与内容宽度,要注意区分,在浏览器里BOX的实际宽度为margin+border+padding+width,而内容宽度则是width,在有使用margin、border、padding的情况下,实际宽度≠内容宽度。

  2. 对BOX设置float:left;会使其自适应高度,如果你在此同时也设置了它的margin左边值,那么在IE6里它将出现double-margin的BUG,解决方法是给其加上display:inline;样式。另外overflow:auto;也可以使IE7、FF自适应高度,IE6则要再加上height:100%;。

  3. 在某些情况下使用负值会让你有意想不到的结果。

  4. 有些时候使用“%”也会有不错的效果。

  5. 将图片的border属性直接写到CSS里面去,不要写在源码里。并且应该使用none,而不是0。

  6. 在FF里当出现滚动条时会将滚动条开始的位置当做边界点,而IE6里则没有这样的解释,不管有没有滚动条,边界点始终是窗口边缘。

  7. Window.Event事件中,FF无法直接调取,需在事件发生时通过参数传递,如:onClick="go(event);"IE下是直接用Window.Event来使用的,FF里则是用传递的这个参数来赋予变量来使用,为了兼容IE和FF我们的代码可以这样写:

    function go(evt){

      e=evt?evt:window.event;

      alert(e.clientX);

    }

    这样无论在IE还是FF里都能正确的弹出点击时鼠标的X值。

  8. 链接样式的CSS写法顺序是:LVHA(LoVeHAte爱恨)。

  9. 如果你想让一行没换行的文字垂直居中的话那么你可以用内补丁来使它看起来像是垂直居中的样子,但最好还是将其line-height设置为和它的父级元素的height一致。

  10. *+html、_html与*html是IE特有的标签,FireFox暂不支持。*html只有IE能识别,而*+html又是IE7特有标签,_html则只有IE6支持。

  11. 随页面滚动的浮动层在网页加上标准声明后无法滚动了,原因是因为JS文件里的document.body.scrollTop不被标准支持,只要把这句代码替换成document.documentElement.scrollTop就可以了。

  12. 如果有时候你在IE里发现文字消失了,滚动掉再滚回去又出现了,或者鼠标选中周围一起的内容就显示了,那么你可能陷入了IE的“文字消失之迷”,解决方法就是给消失的元素加上position:relative,但是在某些情况下也无法解决。

  13. 如果你决定给DIV一个height那么请不要忘记把它的padding-bottom给去掉,否则IE6与IE7、FF的计算并不一致,如需间隔请直接加在height里。

  14. 使iframe透明只要加上这个属性allowtransparency="true"就可以了(也许你IFRAME的页面也不应该有背景色)。

  15. 网页设计的黄金比例1.62

TAG:心得体会 

返回上一页

最近三条评论 - 查看所有评论

当前没有任何评论!

添加评论

大名:

电邮:

网站:

验证:请输入的结果

内容: