不灭的火

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

Nicholas C. Zakas最近发布了CSS Lint，旨在检测CSS代码中存在的各种问题，从而写出更高效的CSS。

CSS Lint现有的一些规则：

• 修复解析错误（Parsing errors should be fixed）
• 避免使用多类选择符（Don't use adjoining classes）

IE6以及更古老的浏览器对类似.foo.bar的多类选择符解析不正确，参考IE6下的多类选择符一文。

• 移除空的css规则（Remove empty rules）

原文 http://www.stubbornella.org/content/2012/05/02/cross-browser-debugging-css/

作者为YAHOO前端工程师。

首先要做的是挑选一个好的浏览器。我的选择是Chrome，因为它拥有强大的调试工具。当我在Chrome上完成调试后，我会接着在Safari或者Firefox上调试。

如果在这些“好的”浏览器上没有达到期望的效果，很有可能是代码本身违背了CSS规则。不要试图使用hack方法来解决在这些“好的”浏览器上出现的问题，而是应该找出问题的原因。通常我会检查以下可能的BUG出处：

网上看到的，共享出来给大家

jQZoom（目前最新v2.2版本）官方网在：http://www.mind-projects.it/blog/jqzoom_v10大家可以在这里看演示

也可以打这里下载 jQZoom v2.2：

http://download.csdn.net/detail/wenjianbao/5020276

折腾了一上午，就是搞不定这个最小高度 min-height:的问题，因为min-height:只在IE7FF中起作用。至于这个IE6死活就是不认。而我这个页面又必需得用这个最小高度来定。

页面是二栏的左右分，左栏算是导航菜单固定不变，长约1160PX，右边是产品的详细信息且是动态的，可长可短。

最近在做手机端的 h5 页面的视频直播功能，用到了 Video 标签。其常用的属性有以下几个：

src、poster、preload、autoplay、loop、controls、width、height等属性。

1、src属性 和 poster属性

跟<img>标签的一样，这个属性用于指定视频的地址，而poster属性用于指定一张图片，在当前视频数据无效时显示，可当作一张 预览图。视频数据无效可能是视频正在加载，可能是视频地址错误等等。

<video width="658" height="444" src="http://www.youname.com/images/123456.mp4" poster="http://www.youname.com/images/123456.png" autoplay="autoplay"></video>