右下角定位--absolute与fixed

Submitted by 爱得 on 2010, March 30, 4:13 PM

工作中考虑的两种右下角定位--两个实例,都涉及JS

XML/HTML代码
  1. <div id="aide">例子二</div>   
JavaScript代码
  1. function _(id){ return document.getElementById(id);}      
  2. if(navigator.userAgent.toLowerCase().indexOf("msie 6.0") != -1){      
  3. window.setInterval(   
  4. function(){      
  5. var top = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight);      
  6. var left = (document.documentElement.clientWidth > document.body.clientWidth) && (document.documentElement.clientWidth != 0) ? document.documentElement.clientWidth : document.body.clientWidth;      
  7. _('PosiFixed').style.position = "absolute";      
  8. _('PosiFixed').style.top = (top - 70) + "px";      
  9. }      
  10. , 500);      
  11. }      
  12.   
  13. //例子二      
  14. function adBox(){       
  15. var aide = document.getElementById("aide");       
  16. aide.style.top = document.documentElement.scrollTop+document.documentElement.clientHeight-225+"px";      
  17. setTimeout(function(){adBox();},100);       
  18. }      
  19. adBox();    

» 阅读全文

Tags: 定位, web标准

Web标准 | 评论:0 | Trackbacks:0 | 阅读:444

tab练习...

Submitted by 爱得 on 2010, March 29, 2:46 PM

1.html结构

XML/HTML代码
  1. <div id="tabBox">  
  2.    <div id="tabMenu">  
  3.        <ul>  
  4.           <li class="cursor">选择一</li>  
  5.           <li>选择二</li>  
  6.        </ul>  
  7.    </div>  
  8.    <div id="tabContent">  
  9.       <div>  
  10.          <ul>  
  11.    <li><a href="">有无关于前端，WEB标准等的杂志 New1</a></li>  
  12.    <li><a href="">有无关于前端，WEB标准等的杂志 New</a></li>  
  13.    <li><a href="">有无关于前端，WEB标准等的杂志 New</a></li>  
  14.    <li><a href="">有无关于前端，WEB标准等的杂志 New</a></li>  
  15.          </ul>  
  16.       </div>  
  17.       <div class="aide">  
  18.          <ul>  
  19.    <li><a href="">有无关于前端，WEB标准等的杂志 New2</a></li>  
  20.    <li><a href="">有无关于前端，WEB标准等的杂志 New</a></li>  
  21.    <li><a href="">有无关于前端，WEB标准等的杂志 New</a></li>  
  22.    <li><a href="">有无关于前端，WEB标准等的杂志 New</a></li>  
  23.          </ul>  
  24.       </div>  
  25.    </div>  
  26. </div>  
  27. <script type="text/javascript">aiTab('tabMenu','tabContent');</script>  

» 阅读全文

Web标准 | 评论:0 | Trackbacks:0 | 阅读:417

如何快速定位页面中复杂 CSS BUG 问题

Submitted by 爱得 on 2010, March 25, 12:14 PM

本文转载自:http://www.planabc.net/2009/01/14/how_to_quickly_locate_the_complicated_css_bug/#comment-2520

相信大家对于常见 CSS BUG 的处理已经相对比较熟悉，例如：IE6 Three Pixel Gap、IE5/6 Doubled Float-Margin Bug 等等。但时常我们也会碰到复杂的 CSS BUG 问题，所谓“复杂”实质是指触发的条件很复杂，而“BUG” 也并非指一定是浏览器的 BUG 。对于此类问题，我们首先要解决的是如何定位到问题，只有快速的定位到问题，才能更好的解决问题。

对于快速定位，个人的经验处理一般如下（基本可以定位到我在 淘宝 遇到的 90% 以上的复杂 CSS BUG 问题）：

1、检查页面的标签是否闭合

不要小看这条，也许折腾了你两天都没有解决的 CSS BUG 问题，却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的，而他们很容易犯此类问题。

快捷提示：可以用 Dreamweaver 打开文件检查，一般没有闭合的标签，会黄色背景高亮。

2、样式排除法

有些复杂的页面也许加载了 N 个外链 CSS 文件，那么逐个删除 CSS 文件，找到 BUG 触发的具体 CSS 文件，缩小锁定的范围。

对于刚才锁定的问题 CSS 样式文件，逐行删除具体的样式定义，定位到具体的触发样式定义，甚至是具体的触发样式属性。

3、模块确认法

有时候我们也可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块，寻找到触发问题的 HTML 模块。

» 阅读全文

Tags: css bug, 标准

Web标准 | 评论:0 | Trackbacks:0 | 阅读:265