不灭的焱

现在网站基本提供了这么一个功能： 当页面超过一屏时，从第二屏开始页面右边底部悬浮一个 top 提示，点击返回页面顶部。

效果图如下：

display:none和visibility:hidden的区别

不同有三点：

1. 空间占据
2. 回流与渲染
3. 株连性

优酷网 reset.css

@charset "utf-8";
/*element*/
html{direction:ltr;*overflow-y:scroll;}
body{height:100%;background:#fff;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,button,select,option,textarea,p,blockquote,th,td{padding:0;margin:0;font:12px/20px arial, helvetica, verdana, tahoma, sans-serif;word-break:break-all;word-wrap:break-word;}
img{border:0;vertical-align:top;}
ol,ul,dl{list-style:none;}
h1{font:bold 16px/18px "microsoft yahei","微软雅黑";}
h2{font-weight:bold;font-size:16px;}
h3{font-weight:bold;font-size:14px;}
h4{font-weight:bold;font-size:12px;}
h5{font-weight:bold;font-size:12px;}
h5{font-weight:bold;font-size:12px;}
h6{font-weight:bold;font-size:12px;}
a{cursor:pointer;color:#014ccc;text-decoration:none;}
a:hover{text-decoration:underline;}

经验证，其实是IE6的list-style-position属性造成的，默认情况下，Firefox中list-style-position值为 outside,即列表项符号会在LI标签的外面显示。而IE6的默认值则相反(inside)。不过这还不是问题关键，IE6完全是属于占着茅坑不拉屎 的那种，即使你不显示列表项符号，即把list-style-type设置成none，它依然会保留列表项符号占用的空间。所以无论你给LI的设置 margin:0或者padding:0，你都会发现Li左边会多出16PX的空间。

http://www.oschina.net/code/snippet_12_7605

在线演示：

http://www.oschina.net/r.html

Chrome开发者工具 英文翻译：

Elements:元素

Resources:资源

Network:网络

Sources:来源

有的时候，为了实现一些特殊效果，需要将页面元素变透明，本文介绍的就是用 CSS 实现 Firefox 和 IE 都支持的 Alpha 透明效果。

filter:alpha(opacity=50);       /* IE */
-moz-opacity:0.5;              /* Moz + FF */
opacity: 0.5;           /* 支持CSS3的浏览器（FF 1.5也支持）*/

结果发现IE6.IE7正常，ie8,FF显示错误。

症结：当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的margin-top作用于父元素。

解决方案：

1、使用浮动来解决，即将子层代码改为：

浏览器对Base64的支持

图像是最经常被使用的一种二进制文件。而现代的浏览器的进步日新月异，IE7，FireFox和其他浏览器为包括Base64在内各种编码的图像信息提供了很好的支持。因此图形信息可以以下面的形式呈现在页面中：

详情查看：http://raylinn.iteye.com/blog/790473