发表于
2010-06-28 06:04:24
Firefox 3.6.6发布
6月23日Mozilla发布了Firefox3.6.4 ，今天又紧急发布了 Firefox 3.6.6 ，此次升级主要改进了崩溃保护功能，延长了插件无响应后浏览器终止该插件前的等待时间。崩溃保护是Firefox3.6.4 新引入的功能，当一个插件崩溃并导致整个浏览器无响应后，Firefox会在 10 秒后终止改插件，不会影响Firefox其它部分，你可以重新加载该页面并重启此插件。不过很多用户反应，他们的旧机器反应不快，所以希望可以延长浏览器等待无响应插件的时间，尤其是游戏，对于他们来说，10 秒钟太短了。为了解决这个问题，Mozilla延长了Firefox在终止某插件前等待其响应的时间，由 10 秒延至 45 秒。Firefox自带的升级功能会提示升级此版本。相关日志Firefox 4.0 Beta 1发布(1)10月浏览器市场排行 Chrome增长快(1)Firefox 4.0 Beta 2预览版发布(1)Mozilla Firefox 4.0最新用户界面(7)12月份浏览器市场排行榜(1)Original article:Firefox 3.6.6发布©2015一起CSS. All Rights Reserved.
...继续阅读
(9)
发表于
2010-06-11 09:29:56
jQuery插件Cloud Zoom
发表于
2010-06-06 05:57:17
Mozilla Firefox 4.0最新用户界面
发表于
2010-06-03 09:41:30
“导”字导致样式失效
编码是一个标准页面所必须的，但有些人不太在意。或者不定义编码，或者混用编码。也许一般情况下不会出问题，但出了问题就很难会注意到和编码有关系。一位朋友就因为混用编码引发了一个奇怪的问题：样式文件内的部分样式失效，而代码没有任何错误。你没遇见过这样的问题吧？来看看具体是什么情况：这位朋友的 HTML 文件的编码为 gb2312 ，而 CSS 文件是 utf-8 的，CSS 文件里有一条注释为“/*导航条*/”。这些有问题吗？对！也许他们不同时存在就没问题，但他们存在了就产生了一个奇怪的问题：注释“/*导航条*/”与下一条注释之间的样式在 IE 下没有效果，如果没有下一条注释了，则下面的样式全部没有效果。不光是 IE6 、IE7 ，甚至 IE8 、IE9预览版都没有效果。用 IE 浏览器测试下面的地址试试吧。查看Demo从测试页面可以看到有两条样式失效了，分别是：字体红色和下划线。奇怪的是把“导”字或“航”字删掉，样式就起效果了。更奇怪的是“导”字或“航”字他们的总数是基数的时候，如“/*导导航条*”或"/*导导导条*/"，是偶数的时候又失效，如“/*导航导航条*/”或“/*导导航航条*
...继续阅读
(12)
发表于
2010-06-02 12:57:00
5月份IE与Firefox市场份额双双下滑
.png)
发表于
2010-05-18 16:46:46
说说CSS Hack和向后兼容
人一旦习惯了某些东西就很难去改，以及各种各样的原因，新的浏览器越来越多，而老的总淘汰不了。增长总是快于消亡导致了浏览器兼容是成了谈不完的话题。说 到浏览器兼容，CSS HACK自然而然地被我们想起。今天，我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事，需要我们有统一的规范来进行Coding，以 方便维护。而解决兼容的方法就是（必须是，因为这才最容易有问题的）其中一个最重要的、要解决的规范之一。在解决兼容方法上，想定出一个统一的规范，个人认为应该以下面3点为基本原则：权衡成本：在浏览器被淘汰后，如何快速清理掉无用代码可维护：在资源成本和完美间平衡的向后兼容可读：省力、易记这里把成本放在了第一位，并不是说我们不愿意追求完美，而只是，太刻意追求完美有时候可能会阻碍我们前进；在成本后，应该是可维护和可读，这点对于团队的合作来说至关重要，而最终结果也是为了减少成本。先把这三个原则存起来，来看看我们平时解决兼容的写法（后面会附详细的Hack方法列表）：一、CSS 选择器 Hack/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{head~body .sofish{display:block;}}这
...继续阅读
(11)
发表于
2010-05-06 04:17:46
IE9平台预览第二版发布 支持HTML5 GPU加速
发表于
2010-05-05 09:53:01
IE的市场份额下降到历史最低
微软的 IE 浏览器抵挡不住来自 Firefox 和 Google Chrome 的凶猛攻势。Net Applications 的统计显示，IE 的浏览器市场份额 11 年来首次低于 60%。IE 在2010年4月的市场份额为 59.95%，比前一月下降了 0.9%，降至了1999年初 IE5 发布之初的水平。Firefox 上涨了 0.07% 至 24.59%，Chrome 增加了 0.6 个百分点，达到了 6.73%，Safari 为 4.72%，Opera 失去了 0.07% 至 2.30%，Opera Min 则为 0.79%。相比之下，StatCounter 的统计显示，IE 的市场份额为 51.42%，Firefox 占 32.62%, Chrome 占 8.82%，Safari 为 4.27%，Opera 为 1.99%。Net Applications 同时发布了操作系统市场调查数据。据悉，操作系统市场份额并没有明显变化。WindowsXP依旧以63%的份额占据首位。相关日志10月浏览器市场排行 Chrome增长快(1)IE全球市占率重新超过60%(0)12月份浏览器市场排行榜(1)7月份全球主流浏览器市场份额(2)5月份IE与Firefox市场份额双双下滑(1)Original article:IE的市场份额下降到历史最低©2015一起CSS. All
...继续阅读
(9)
发表于
2010-04-01 16:07:23
2010年3月浏览器市场占有率 Chrome再次上涨0.5个百分点至6.13%
Net Applications 在4月的第一天公布了2010年2月至3月间的浏览器市场占有率报告，Chrome 再次上涨0.5个百分点交出了6.13%的成绩单，这个数字已经是 Firefox 的1/4。其他浏览器方面，Firefox 从 24.2% 上涨到 24.5%，Safari 也随着 Mac 的大卖从 4.5% 增长到 4.7%，而跌幅最惨烈的当然是 IE —— 从 61.6%直跌到60.7%。文章转载自：中文业界资讯站原文地址：http://www.cnbeta.com/articles/107690.htm相关日志IE全球市占率重新超过60%(0)5月份IE与Firefox市场份额双双下滑(1)10月浏览器市场排行 Chrome增长快(1)12月份浏览器市场排行榜(1)3月份IE浏览器份额继续下滑 IE9不敌FF4(3)Original article:2010年3月浏览器市场占有率 Chrome再次上涨0.5个百分点至6.13%©2015一起CSS. All Rights Reserved.
...继续阅读
(6)
发表于
2010-04-01 15:51:59
Mozilla公布Firefox占有率数据 全球接近30% 俄罗斯达到60%
Mozilla今天公布了其全球互联网报告，他们的3.5亿用户分布在全球各大洲，市场占有率已经接近30%，其中在欧洲达到了39%，南美为31%，超出平均水平。最有震撼力的数据是俄罗斯，Firefox使用量高达60%，成为主流浏览器，另外一个有趣数据是Firefox典型用户一般只会使用2-3个tab浏览网页，而最多的一个则为同时打开600个……以下是数据图表：FF 用户打开 tab 数量的图片。夏威夷、怀俄明州和纽约不同时段 FF 使用率。FF 在 7 大洲占有率。文章转载自：中文业界资讯站原文地址：http://www.cnbeta.com/articles/107592.htm相关日志IE全球市占率重新超过60%(0)5月份IE与Firefox市场份额双双下滑(1)九月份全球主流浏览器市场排行榜(1)2010年3月浏览器市场占有率 Chrome再次上涨0.5个百分点至6.13%(2)10月浏览器市场排行 Chrome增长快(1)Original article:Mozilla公布Firefox占有率数据 全球接近30% 俄罗斯达到60%©2015一起CSS. All Rights Reserved.
...继续阅读
(11)
发表于
2010-03-31 03:45:50
jQuery EasyUI
发表于
2009-11-09 06:43:25
css hack
css hack 是个很有争议的东西，一开始我也很讨厌，因为我觉得可以饶过 css hack，通过另外的方法解决问题。但是，随着工作中的不断实践，改变了我的观点，css hack 虽然不能通过 w3c 标准认证，但适当是使用很有可能会使你的 HTML 结构更紧凑、有效的减少无语义标签或带来其他好处。在公司，电脑里的浏览器是 ie6，除了开发部和技术部外，其他部门的同事很少装其他浏览器（不过有小部分可能会升级到 ie7/ie8）。而开发部和技术虽然会装 ff，但装好之后一般不会升级，因为他们不一定是前端开发人员，他们装 ff 的目的也只是看看自己做的东西在 ff 下是否正常，所以这就导致了公司里有各个版本的 ie 和 ff 都有。其实这不是最严重的，因为我做的东西除了在 op 下可能会有些差异外，在上面所有浏览器和 sa 、ch 下都表现的很好。最严重的是之前的有些东西他们做的时候可能只考虑到 ie6，所以如果要修复的话，会把我给郁闷坏，因为我不仅要针对浏览器修复，还有可能要针对浏览器版本修复。如果是你的话，你会头疼吗？所以我收集了一些我认为是比较简单方便的 css hack，一来是自己在工作可能需要，二来算是分享吧。这些 css hack 注意顺序一起使用，能区分不同的浏览器和版本。当然，如果你没必要考虑这么复杂的情况，就挑选需要的用咯。通过实例来体现吧。html 代码您的浏览器是
...继续阅读
(13)
发表于
2009-10-11 00:18:54
修改：自动播放的jQuery幻灯片
一位读者在《自动播放的jQuery幻灯片》中反映了一个问题，就是鼠标在缩略图上快速反复移动的时候，会出大图和缩略图不一致、鼠标输出缩略图幻灯片仍在快速切换和 CPU 占用飙涨等问题。因为幻灯片切换的时候有一个动画过程，鼠标每经过一张缩略图都会执行这个动画过程，如果上一个动画过程还没执行完鼠标就移到另一张缩略图上，那这张幻灯片的切换动画会等到上一个动画执行完成才会执行。如果鼠标在这些缩略图上来回移动，那将会“累积”很多动画，它们会一个接一个的执行，所以引发上上面那些问题。要修复上面的问题，加上一条判断语句即可：如果有动画正在执行，鼠标移到缩略图上就不执行动画函数。具体代码如下（和原来的相比就多了一句判断）：var theInt = null;
var curclicked = 0;
$(function(){
$('#transparence').css('opacity','0.4');
$('#pic_list img').css({'opacity':'0.6'});
$('#pic_list img:eq(0)').css({'top':'0','opacity':'1'});
$('#pic_list a').click(function(){return false});
t(0);
$('#pic_list img').mouseo
...继续阅读
(13)
发表于
2009-09-21 01:21:22
用js模拟css属性选择器
CSS 的属性选择器是很有用的，它能有效的减少类的使用，但众所周知，IE6 是不支持 CSS 属性选择器的，为了兼容 IE6 ，一般的做法还是给需要的元素额外加类。如果是静态页面，那还好处理，直接在需要的元素上加上类，但如果是动态内容或其他因素影响，不能确定要在哪个元素上加类，那就比较棘手了。这个时候用 js 来处理应该是比较好的，方法也许您也想到了，就是：获取元素属性的值，然后判断值是否包含指定的字符串，如果包含就加上类。做一个列子吧，就拿最近做的一个东西来做吧，是一个列表，如果这个列表中的某个连接是直接打开 pdf 文件，就给这个链接后面加上 pdf 的小图标，以示提醒作用。看代码吧，XHTML 和 CSS 代码就省略了，看主要的 JS 代码：window.onload = function(){
var list = document.getElementById('list');
var listA = list.getElementsByTagName('a');
for(var i = 0; i < listA.length; i++){
var href = listA[i].href;
if(href.indexOf('pdf') != -1){
listA[i].className = 'haspdf';
}
}
}查看Demo因为这段代
...继续阅读
(19)
发表于
2009-09-08 08:13:12
CSS Expressions有多可怕
CSS Expressions 俗称 CSS 表达式，避免使用 CSS Expressions 是前端开发的一个重要指南，为什么要避免使用 CSS Expressions 呢？我们看看雅虎YUI的说明：表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。从上面可以看出 CSS Expressions 是如此的可怕。但也许单纯的文字说明还不能使你深入的明白 CSS Expressions 的可怕，那就引用子鼠的例子来实际说明吧：XHTML 和 JS 代码：计算了次var k = 0;
function test() {
k++;
document.getElementById('c').value = k;
return;
}22222222222222222222JS 代码是用来计算 CSS Expressions 的计算次数。CSS Expressions 表达式代码：body {
font-size:12px;
font-family:Verdana;
line-height:1.9
}
div a {
display:block;
border:1px solid #F
...继续阅读
(10)
发表于
2009-09-03 09:16:26
自动播放的jQuery幻灯片
读者“辣椒”在《jQuery写的一个幻灯片》中留言说幻灯片没有自动播放效果，其实写好之后不久就觉得少了点什么，看来看去，最后发现就是缺少自动播放效果，想找个时间把自动播放的效果加上，但似乎总是没有时间。今天就乘读者“辣椒”提出了这个问题，就抽时间写一下吧。结构和样式都没有变，只有 jQuery 代码有变，具体的代码如下：var theInt = null;
var curclicked = 0;
$(function(){
$('#transparence').css('opacity','0.4');
$('#pic_list img').css({'opacity':'0.6'});
$('#pic_list img:eq(0)').css({'top':'0','opacity':'1'});
$('#pic_list a').click(function(){return false});
t(0);
$('#pic_list img').mouseover(function(){
if($('#this_pic').attr('src') == $(this).attr('src')) return;
t($('#pic_list img').index($(this)));
});
});
t =
...继续阅读
(15)
发表于
2009-08-31 16:05:29
HTML4和浏览器默认样式
HTML 4 标签：h1-h6,p,ul,ol,dl…即使没有给他们定义样式属性值，他们在浏览器中显示时，也会具有各种样式属性(主要是字体大小和各种间距)。这是因为它们各自有自己的默认样式，或者是浏览器给它定义了默认样式。各种版本的浏览器给他们定义的默认样式可能略有差别，下面列举的一些常见标签自身默认样式和在 Firefox 1.5 和 IE6/7 中的默认样式。HTML样式html, address,blockquote,body, dd, div,dl, dt,
fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6,
noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }
/*以上均为块状显示，未列出为内联元素显示，部分元素在XHTML1中将废弃*/
li { display: list-item }/*默认以列表显示*/
head { display: none }/*默认不显示*/
table { display: table }/*默认为表格显示*/
tr { display: table-row }/*默认为表格行显示*/
thead { display: table-header-group }/*默认为表格头部分组显示*/
...继续阅读
(11)
发表于
2009-08-05 18:59:25
语义化的HTML结构到底有什么好处？
相信大家都知道html和css，知道html结构和css表现分离，知道html语义化，这些都是这几年的热门关键字。语义化的html在国内也是一两年前才开始被追捧的，看看现在群里谈论的html结构，关于html结构的面试题，语义化的html占据了很大一部分。那么为什么要使用语义化的HTML？语义化的HTML到底有什么好处呢？ HTML是提供网页文档内容的上下文结构和含义；html本身是没有表现的，我们看到例如是粗体，字体大小2em，加粗；是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以首先我们要知道html和页面的表现是没有关系的，这些是css的事情。HTML在页面中的作用就是结构和含义，通俗点说就是划分内容，这里放什么，我们放的是什么。语义化的HTML结构首先要强调HTML结构HTML结构是页面的骨架，一个页面就好像一幢房子，HTML结构就是钢精钢筋混泥土的墙，一幢房子如果没有钢精钢筋混泥土的墙那就是一堆费砖头，不能住人，不能办公。css是装饰材料，是原木地板，是大理石，是油漆，是用来装饰房子的，CSS的强大就不用多说了，css如果没有html结构那就是一堆木板，一同油漆，没有了实际使用价值。CSS完全依靠引用它的(X)HTML文档。如果你想使CSS的能力充分发挥到极致，提供一个用既干净又有结构的内容的html是非常必要的，“HTM
...继续阅读
(12)
发表于
2009-06-15 15:56:21
jQuery写的一个幻灯片
最近做一个网站，需要用上一个大幅点的幻灯片，幻灯片这东西网上一搜一大把，所以就想去“淘”一个，省点工夫，但"淘"了好一些都不满意，不是太老土、不美观，就是不兼容或到不到想要的结果等等，最后决定自己就写了一个。 看看代码咯。XHTML 代码：说明：#slide是最外面的容器，#this_pic是要显示的大图，#pic_list是图片缩略图，#transparence是一个半透明的层，因为想给#pic_list和里的缩略图应用半透明效果，但半透明效果会继承，无法更改，所以模拟了这个层。CSS 代码：#slide {
position:relative;
width:740px;
height:240px;
margin:20px auto;
}
#pic_list {
position:absolute;
left:0;
bottom:0;
width:100%;
list-style: none;
overflow:hidden;
z-index:2;
}
#pic_list li {
float:left;
width:100px;
height:52px;
padding-top:10px;
}
#pic_list li img {
position:absolute;
top:18px;
width:65px;
h
...继续阅读
(11)
发表于
2009-05-11 16:32:20
margin叠加原理
margin 叠加是什么？就是当垂直外边距相遇时，它们将叠加，叠加的高度取较大的。下面按各种情况及附图来说明。当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加，如图：元素的顶边界与前面元素的底边界发生叠加。当一个元素包含在另一个元素中时（假设没有填充或边框将边界分隔开），它们的顶和/或底边界也发生叠加，如图：元素的顶边界与父元素的顶边界发生叠加。尽管初看上去有点儿奇怪，但是边界甚至可以与本身发生叠加。假设有一个空元素，它有边界，但是没有边框或填充。在这种情况下，顶边界与底边界就碰到了一起，它们会发生叠加，如图：元素的顶边界与底边界发生叠加。如果这个边界碰到另一个元素的边界，它还会发生叠加，如图：空元素中已经叠加的边界与另一个空元素的边界发生叠加。边界叠加初看上去可能有点儿奇怪，但是它实际上是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的顶边界。如果没有边界叠加，后续所有段落之间的边界将是相邻顶边界和底边界的和。这意味着段落之间的空间是页面顶部的两倍。如果发生边界叠加，段落之间的顶边界和底边界就叠加在一起，这样各处的距离就一致了，如图：边界叠加在元素之间维护了一致的距离。margin 叠加只发生在普通文档流中块框的垂直，行内框、浮动框或绝对定位框之间的边界不会叠加。margin 叠加虽然是合理的，但如果处理不当，会产生不期
...继续阅读
(10)