“点亮网页”:一个实用的Firefox和IE插件

March 13, 2010 by SLJ | Category:HTML/CSS | 1 Comment 1,973

支付宝UED的鸽子同学制作了一个Firefox插件,它可以用来快速实时编辑网页代码,快速基于Firefox制作Demo页面,方便的编辑修改CSS Sprite,以及配合Fiddler调试页面,是一个很不错的前端开发助手。

Firefox版本

该插件基于Firebug,所以安装前请确保已经安装Firebug。

一些主要特性;

  • 即时编辑——即改即现,把Firefox打造成超强网页编辑器;
  • 与Fiddler一起使用,快速调试线上网页,HTML代码快速生成;
  • 刷新CSS,DOM不刷新;
  • 禁用单个CSS样式;
  • CSS Sprites位置快速设定;
  • 保持Session不过期;
  • 导出任意节点为PNG图片;

More »

几款IE的调试工具

March 7, 2010 by SLJ | Category:HTML/CSS | 2 Comments 2,687

今天MeePlace被报了IE7的BUG,郁闷!

介绍几个IE下的调试工具,需穿墙下载。
Companion.JS 这是一个IE下的JS调试工具,就像Firebug

http://www.my-debugbar.com/wiki/CompanionJS/Installing

DebugBar 这是IE的一个工具条,可以显示DOM,HTTP请求等

http://www.debugbar.com/

IETester 多窗口,多版本的IE

http://www.my-debugbar.com/wiki/IETester/HomePage

还是那一句:I hate IE !!!

CSS在Internet Explorer 6, 7 和8中的差别

October 21, 2009 by SLJ | Category:HTML/CSS | 1 Comment 1,471

关于浏览器的最离奇的统计结果之一就是Internet Explorer 版本6,7和8共存。截至本文,Internet Explorer各个版本总共占据了大约65%的市场份额。在网站开发社区,这个数字要小很多,统计显示大概只有40%

ie

More »

CSS半透明度设置归纳总结[Firefox,IE,Chrome,Safari]

April 16, 2009 by SLJ | Category:HTML/CSS | No Comment 2,762

IE:
filter:alpha(opacity=sqlN)
其中 sqlN的值域为[0, 100]

Firefox:
-moz-opacity:sqlN
其中sqlN的值域为[0, 1]

Chrome和Safari:
opacity:sqlN
其中sqlN的值域为[0, 1]

 

UPDATE

Apr 26

对于Firefox来说,用opacity就能完成透明化设置了,所以上面的-moz-opacity参考一下。
还有请注意,上面的属性会将元素内的所有内容都透明化,包括文字与图片,所以如果想要背景半透明的话,目前推荐的方法是用PNG图片做背景。
一般不考虑IE6兼容性,如果要考虑IE6的兼容性请在网上搜索PNG JS,会有一些javascript能够优化IE6下的PNG半透明,在我的QQ空间中也有相关的代码。这里不阐述了

关于一些浏览器的的Hack

March 29, 2009 by SLJ | Category:HTML/CSS | No Comment 2,190

关于一些浏览器的的Hack,我怎么老是忘,每次都要查,实在是郁闷

现在,就几句话我要写清楚!我只写关于 IE6, IE7 的hack

至于Chrome, Safari, Opera那些我就先不写了,毕竟那些出错是有点麻烦,目前也不是主流浏览器。那至于IE8,刚刚正式发布不久,从目前情况来看,显示效果和FF3好像还没发现不同,IE8以后再说了。如果你看到此文章时已经有发现问题的话,可以和我留言,我们共同研究。

1、只有IE6 和 IE7 有效的hack:

.abc{width:100px; *width:50px;} /*IE6与IE7将体现 width:50px*/

(这一条在我以前学习的教程中说是IE7特有的hack,但是我今天试验后,IE6也被影响到)

2、下面是 IE6, IE7 与 IE8, FF 的hack(其实可以和第一条放在一起)
就如我的感觉,使用IE8那么多天以来,页面显示方面更偏向于FF,而非传统的IE系列,这个原来是对付IE系列与FF系列的hack现在已经成了 IE系列与IE8和FF的hack了,呵呵,说实话,对于IE8的“叛徒”举动,我非常赞成,以后可以少很多工作量了。

.abc{width:100px; +width:50px;} /*IE6与IE7将体现 width:50px*/

3、只有IE6有效的hack

.abc{width:100px; _width:50px;} /*IE6将体现 width:50px*/

或者

.abc{ width:50px!important;      width:0;}  /*有important的必须在前面,ie6为0*/

More »

↑ Top