显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

朱文龙(Z.Mofei)的blog

当你能飞的时候就不要放弃飞翔。

 
 
 
 

日志分类

 
 
日志分类列表加载中...
 
 
 
 
 
 
 
心情随笔列表加载中...
 
 
 
 
 
 我要留言
 
 
 
留言列表加载中...
 
 
 
 
 
 
 
日志评论
评论列表加载中...
 
 
 
 
 
 
 
列表加载中...
 
 
 
 
 
 
 
我的关注列表加载中...
 
 
 
 
 
 
 
圈子列表加载中...
 
 
 
 
 
 
 
 

认知:IE6、IE7支持但不完全支持display:inline-block属性

2012-3-12 15:51:12 阅读712 评论1 122012/03 Mar12

发布一个小时后,总感觉不安,查询了一些资料,决定修改本篇。

原文标题是:认知:IE6、IE7的确不识别display:inline-block属性,内容如下:

-------------------------------------自制分割线-----------------------------------------

虽然布局中经常用到display:inline-block,ie6,ie7也确实表现的跟“真”的一样,但是这 哥俩 确实是不识inline-block为何物的。。。

因为我曾经试着对div设置display:inline-block;来布局,FF没有问题,但是ie6不行依然将div解析为block,当时偶觉得是ie的bug。

今天在群里偶然被提起了,一位童鞋提供了一个网址,看了以后深表认同,看到此文的第一句

vapour 写道

在IE6、IE7中不识别display:inline-block属性,但使用inline-block属性在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表症。

立马就想到了之前div inline-block的尝试,无需犹豫了。

此文写的很清楚了,偶就无需多说,贴上链接,有研究的可以详细参看:

http://www.dovapour.com.cn/article/20090611175.html

--------------------

作者  | 2012-3-12 15:51:12 | 阅读(712) |评论(1) | 阅读全文>>

HTML5语音输入(webkit)

2012-2-6 11:25:59 阅读1664 评论1 62012/02 Feb6

这个语音输入,在andorid上已经早早有啦。以至于在淘宝发现,就兴致匆匆的想要加进自己的博客。经过一番苦苦寻找,才发现代码就那么一小段。

只需要在input添加属性x-webkit-speech即可,如:

<input type="text" x-webkit-speech />

这样搜索框的就多了一个小话筒,点击就可以使用谷歌的云语音输入啦。

我自己的在我的手机上用的时候感觉识别率挺高的,也是变相说明我普通话很准哈。

还有其他属性,比如:

<input type="text" x-webkit-speech lang="zh-CN"/>

通过lang来限制语言种类。或者:

<input type="text" x-webkit-speech x-webkit-grammar="builtin:search" />

使得语音输入的内容尽量靠近搜索内容,去除多余的字符。还有:

<input type="text" x-webkit-speech onwebkitspeechchange="func()" />

通过发生语言时触发的语音事件。

好了,这个功能只在chrome11及以后版本才支持的。其他浏览器暂时不支持的,不过貌似火狐可以通过插件支持,可以搜索一下。

文章来源

作者  | 2012-2-6 11:25:59 | 阅读(1664) |评论(1) | 阅读全文>>

HTML5视频发展状况

2012-2-6 9:32:07 阅读659 评论0 62012/02 Feb6

注:这篇报告来自LongTail Video

HTML5已经进入了在线视频市场,这是一件激 动人心的事情,同时也对工业开发者提出了挑战。随着HTML5规范和各种浏览器的不断改变,LongTail Video花费了大量的时间来弄清楚这一技术的本质,并且在各种浏览器以及设备上测试了播放效果,然后针对HTML5播放效果对产品进行了优化。

HTML5视频发展现状一文意在与其他的用户以及开发者分享HTML5所支持的技术以及无法实现的技术。

在JW Player开发过程中,我们执行了许多常规测试来检测当前在线视频的状况。这篇报告重点关注HTML5支持技术的当前状况,我们还将继续完善我们的产 品,我们会将我们发现的最新结果向大家公布,希望大家能够从我们发现的结果中获得帮助,我们将测试的结果分成了几个主题。

随着HTML5视频的发展,这篇报告也会随着发生改变。如果一个浏览器或是设备添加了新的功能,我们将在这篇报告中补充相关内容。对于那些不常使用的HTML5视频功能也是一样。欢迎在Facebook上与我们讨论。

1.浏览器和设备的市场份额

首先分享的是浏览器和设备的市场份额统计数据,以及它们目前支持的模式。目前还难以给出一个准确的数据,因为两大数据提供商——StatCounter

作者  | 2012-2-6 9:32:07 | 阅读(659) |评论(0) | 阅读全文>>

前端工程师的价值体现在哪里?

2011-12-5 12:56:43 阅读427 评论1 52011/12 Dec5

豆瓣前端:

认为前端工程师正慢慢演变为产品工程师。wap app, 响应性UI等以html5技术为基础的开发将成为前端工程师的主要工作内容,解决产品跨平台跨设备的实现问题。Javascript, HTML, CSS这些前端工程师熟悉的,多年使用的语言,作为开放标准将被各种平台所支持。产品形态和数据的分离是形势所趋。移动时代对产品形态多元化的要求虽然可 以靠不同技术分别实现,但要付出巨大的成本。这也是html5这个04年就提出来的标准,直到前两年才火爆的原因。

现阶段的价值也很大。 web产品交互越来越复杂,用户使用体验和网站前端性能优化,这些都需要专业的前端工程师来解决。另外,在项目中还要弥补设计师在交互设计上的不足,前端 工程师在开发过程中起着重要的承上启下的作用。一两个前端工程师就可以让整个开发并行起来,让设计到实现的转换更顺利。明智的公司应该贮备前端工程师资 源。

我不认为前端工程师和产品经理有什么关系。好的前端工程师一定会成为好的交互设计师。前端工程师对信息架构的理解应不亚于专业的交互设计师。

新浪前端:

作为前端工程师最核心的价值或者说是责任,就是将大伙的所有心血和努力最终要完美地呈现给用户。在一个技术开发团队中,无疑离用户最近的人就是前端,其次是UI、UE和产品,然后是后端、DBA和系统工程师。

如 果说一个技术开发团队就是一支足球队的话,那么前端工程师无疑就是前锋,他接到队友们倾力传到脚下的球,他责无旁贷,要做的就是必须将球准确无误地打入对 方的球门….. 他有两点必须是非常清楚:

作者  | 2011-12-5 12:56:43 | 阅读(427) |评论(1) | 阅读全文>>

解决FLASH最高层的问题,让FLASH置于div之下

2011-10-25 15:05:48 阅读980 评论0 252011/10 Oct25

三个步骤:

1.设置div 的 z-index:9999 //在最上面显示 这一步就可以保证div在img之上

2.<param name="wmode" value="opaque" />或者<param name="wmode" value="transparent" />(transparent会使Flash变

得透明,建议使用opaque) //IE

3.embed 中加入 wmode="transparent" //FF Chrome

DIV浮动层被FLASH挡住的简单解决方法

只要在Flash对象加入页面时生成的HTML代码中加入以下参数就可以让Div浮动层从Flash下露出来了:

<param name="wmode" value="transparent" />

另外一个更专业的参数:

<param name="wmode" value="opaque" />

transparent是负责透明的,显出浮动只不过是他的一个副业而已;而opaque才是专门负责让Flash位于其它层下的。

wmode 属性/参数

值 Window | Opaque | Transparent

说明:

(可选)允许使用 Internet Explorer 4.0 中的透明 Flash 内容、绝对定位和分层显示功能。此标记/属性仅在带有 Flash

作者  | 2011-10-25 15:05:48 | 阅读(980) |评论(0) | 阅读全文>>

javascript中top、clientTop、scrollTop、offsetTop的用法[收藏]

2011-10-25 10:12:46 阅读691 评论0 252011/10 Oct25

js中常用宽度高度表达方式(详情见图):

网页可见区域宽: document.body.clientWidth;

网页可见区域高: document.body.clientHeight;

网页可见区域宽: document.body.offsetWidth   (包括边线的宽);

网页可见区域高: document.body.offsetHeight  (包括边线的宽);

网页正文全文宽: document.body.scrollWidth;

网页正文全文高: document.body.scrollHeight;

网页被卷去的高: document.body.scrollTop;

网页被卷去的左: document.body.scrollLeft;

网页正文部分上: window.screenTop;

网页正文部分左: window.screenLeft;

屏幕分辨率的高: window.screen.height;

屏幕分辨率的宽: window.screen.width;

屏幕可用工作区高度: window.screen.availHeight;

屏幕可用工作区宽度:window.screen.availWidth;

1、offsetLeft

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。

作者  | 2011-10-25 10:12:46 | 阅读(691) |评论(0) | 阅读全文>>

空路径对页面性能的影响

2011-9-23 12:30:13 阅读572 评论1 232011/09 Sept23

今天同事小凡反馈,淘宝有个商品详情页,旺铺皮肤的 CSS 文件在 Firefox 下很奇怪的被加载了两次。最近对 detail 的渲染速度进行了优化,因此遇到 bug 第一反应是往优化方面找原因。然而调试了许久才发现,该 bug 居然是一个在淘宝深藏了很久的 bug, 在 IE 下会导致一些糟糕的情况产生。一身冷汗,立刻分析解决之。

这个 bug 并不新鲜。早在 2009 年,Nicholas C. Zakas 就发现了空 src 的危害性:Empty image src can destroy your site.

Nicholas 的发现可以概括为一句话:img, script, link 的 src/href 为空时,有可能会导致冗余请求。

今天这个 bug 的起因,可以补充 Nicholas 的发现:CSS 里,background url 为空时,也有可能会导致冗余请求。

除了空值,还有一个值也会出问题:#值。 比如 <img src=”#”>

具体测试结果请看:test.html

从测试结果中可以看出,#值比空值更糟糕。比如 background: url(#), 直接会触发一个新请求。这次旺铺皮肤的样式文件在 Firefox 下被加载两次,就是因为第三方设计师在 css 里写入了 url(#). css

作者  | 2011-9-23 12:30:13 | 阅读(572) |评论(1) | 阅读全文>>

IE下“怪异模式”的触发

2011-9-23 12:26:05 阅读1571 评论0 232011/09 Sept23

问题从做一个布局的水平居中开始,比如:(head省略)

<body><div id="wrapper"></div></body>

要让wrapper定宽并水平居中,需要#wrapper {width:960px;margin:0 auto;}即可,但是在IE的怪异模式下需要加上body {text-align:center;} #wrapper {text-align:left;}

曾经一度认为这个是IE6的hack,正确认识后,这只是IE在怪异模式下才有的问题,那么,通常什么什么情况下会触发IE的怪异模式:

1.没写DOCTYPE,这个最常见;

2.写了DOCTYPE,但不在文档的第一行,实验证明,在DOCTYPE之前有任何非空字符都会触发IE6的怪异模式,在IE7下,DOCTYPE之前有XML的文档声明并不触发,但是在DOCTYPE和XML文档声明之间有任何非空字符仍然会触发。

所以,为了不触发怪异模式,要保证DOCTYPE写在整个html文档的第一行。

作者  | 2011-9-23 12:26:05 | 阅读(1571) |评论(0) | 阅读全文>>

IE6 下textarea width 100% bug

2011-9-14 9:48:55 阅读1680 评论0 142011/09 Sept14

BUG综述:

1.IE6中textarea width:100% 导致其超出body、浏览器有滚动条。

2.某些复杂结构下 输入文字之后 textarea 宽度会自动变宽,这个不举例子了,反正就是在有float 以及有margin的情况下会出现此情况,请遇到的同学自己对号入座。

3.IE6中textarea width:100% 导致的其他bug,此类童鞋可以参考此方法尝试能不能fix bug

/*样式表*/

html, body { width:100%; height:100%; }

/*html*/

< textarea style="width:100%;"></textarea>

解决方案

将<textarea>加在<fieldset></fieldset>标签中,并用<div></div>包围(一定要用div,这点很重要)。

<fieldset>

<div>

<textarea style="width: 100%;" name="content"></textarea>

</div>

</fieldset>

作者  | 2011-9-14 9:48:55 | 阅读(1680) |评论(0) | 阅读全文>>

IE6,IE7,IE8兼容HTML5方法

2011-9-13 22:29:39 阅读2075 评论0 132011/09 Sept13

HTML5能为我们做的事儿很多,最为可口的就是语义化标签的应用,如果你已经在Chrome或者其他支持HTML5的浏览器上用过它的牛x,那这篇文章对你一定有用,因为现在你也可以在IE上用到HTML5。

好吧!大前端今天的主题是:HTML5 Shiv

下面是引用Google的html5.js文件,好处就不说了:

<!–[if IE]>

<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>

<![endif]–>

将上代码复制到head部分,记住一定要是head部分(因为IE必须在元素解析前知道这个元素,所以这个js文件不能在其他位置调用,否则失效)

当然,你也可以把代码拿出来自己看着办:

(function(){if(!/*@cc_on!@*/0)return;var e =”abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video”.split(‘,’),i=e.length;while(i–){document.createElement(e)}})()

最后在css里面加上这段:

作者  | 2011-9-13 22:29:39 | 阅读(2075) |评论(0) | 阅读全文>>

预加载和javascript Image()对象

2011-9-8 18:27:49 阅读541 评论1 82011/09 Sept8

首先是Image()对象的使用,直接贴代码

<html>

<head>

<script language = "JavaScript">

function preloader()

{

heavyImage = new Image();

heavyImage.src = "heavyimagefile.jpg";

}

</script>

</head>

<body onLoad="javascript:preloader()">

<a href="#" onMouseOver="javascript:document.img01.src='heavyimagefile.jpg'">

<img name="img01" src="justanotherfile.jpg"></a>

</body>

</html>以下代码预先加载了heavyimgefile.jpg,当在onMouseOver的时候就不会出现等待的情况。

如果想一次预加载很多张图片可以用以下的代码

<script language="JavaScript">

function preloader()

{

作者  | 2011-9-8 18:27:49 | 阅读(541) |评论(1) | 阅读全文>>

CSS的优先级特性

2011-9-6 13:17:00 阅读348 评论0 62011/09 Sept6

选择器一样的情况下后面的会覆盖前面的属性。比如:

  p { color: red; }

  p { color: blue; }

  p元素的元素将是蓝色,因为遵循后面的规则。

  然而,你不可能经常用相同的选择器冲突达到目的,当你使用嵌套选择器,合理的冲突来了。比如:

  div p { color: red; }

  p { color: blue; }

  也许你看起来p元素在div元素里面的颜色是蓝色,就像后面p元素的规则,但是第一个选择器的特性却是红色。基本上,一个选择器越多特性,样式冲突的时候将显示它的样式。

  一组嵌套选择器的实际特性可以计算出来。基本的,使用ID选择器的值是100,使用class选择器的值是10,每个html选择器的值是1。它们加起来就可以计算出特性的值。

  p的特性是1(一个html选择器)

  div p的特性是2(两个html选择器)

  .tree的特性是10(1个class选择器)

  div p.tree的特性是1+1+10=12,(两个html选择器,一个class选择器)

  #baobab的特性是100(1个ID选择器)

  body #content .alternative p的特性是112(两个html选择器,一个ID选择器,一个类选择器)

  按照上面的规则,div p.tree的特性比div p高,body

作者  | 2011-9-6 13:17:00 | 阅读(348) |评论(0) | 阅读全文>>

近日,偶尔看到一到谷歌的面试题,百度之,竟然发现一堆人的文章在讨论这个,于是总结于此,或表述下,或感叹下,或愤青下,或调侃下~

如果只以小学数学水平来看题目的话,200/4=5,五年就搞定了呗。但是,科技发展的时代啊,如果都这么简单,还读什么大学,读什么研,搞什么飞机啊?!我们要考虑变数啊,房价还会每年上涨,银行利息还会被调整,加上金融危机,还会通过膨胀使得银行存款缩水,现在终于知道为啥要学函数,学方程式,学微积分吧,就算不能拯救自己,起码死了还知道自己是什么死的吧?!至于你信不信,反正我信了!

好的,先上原题:

现在北京有一套房子,价格200万,假设房价每年上涨10%,一个软件工程师每年固定能

赚40万。如果他想买这套房子,不贷款,不涨工资,没有其他收入,每年不吃不喝不消 

费,那么他需要几年才能攒够钱买这套房子? 

A, 5年 

B, 7年 

C, 8年 

D, 9年 

E, 永远买不起

开始解题:

估计看到E选项,情商不低的人,很轻松就能感觉出答案来了!yes,答案就是永远买不起,这是为什么呢?

两个方法:

1. 随便取几个数,拿计算器算去。

2. 我自己看这个题的思路:假设x年后,正好能买得起房,则方程式为200*(1+0.1)^x = 40x, 变形后,1.1^x=x*1/5. 看吧,左边是一个越跑越高的指数曲线,右边是一个斜率为0.2的直线。两者PK,鹿死谁手?

作者  | 2011-9-4 19:43:26 | 阅读(504) |评论(0) | 阅读全文>>

Chorme 本地js不能写 Cookie

2011-8-24 14:19:42 阅读1576 评论4 242011/08 Aug24

项目中遇到要用Cookie的地方

兴起,用js写下了

document.cookie="userId=828";

document.cookie="userName=hulk";

var strcookie=document.cookie;

alert(strcookie);

测试

IE OK

Chrome 居然↓

无语于是google之发现其中奥秘

为了安全 google chrome 等浏览器是禁止本地文件写Cookie的即file:///F:/Lord%20community/test/Untitled-2.html这样的以file开头的是不能写本地文件的,于是打开php环境挂起http://127.0.0.1/21/test/Untitled-2.html,OK工作正常。

于是记之。

作者  | 2011-8-24 14:19:42 | 阅读(1576) |评论(4) | 阅读全文>>

div模拟textarea文本域轻松实现高度自适应

2011-8-12 17:41:11 阅读491 评论5 122011/08 Aug12

一、关于textarea文本域以及高度自适应

textarea标签为表单元素,一般用在多行文字的输入。在web应用上常见的是评论输入框,微博信息输入框等。例如企鹅微博的输入框:

作为多行文本域功能来讲,textarea满足了我们大部分的需求。然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应。textarea总是很自信地显摆它的滚动条,高度固执地岿然不动。所以,有时候,为了增加交互体验想让文本域高度自适应的时候,就会遇到麻烦。并不是不能实现,例如Google的Buzz的输入框就是高度自适应里面的内容的,如下截图:

不说远的,我个人网站的提问与交流页面中的回答输入框(需登录):

当输入一些文字后,文本域的高度自动随内容多少撑高了:

然而,这些文本域的高度自适应都是通过JavaScript脚本实现的。拿我个人站点上的高度自适应文本框来说,要克隆一个隐藏的 textarea,通过实时的文字赋值,检测是否产生滚动条来确定显示文本域的高度是否动态增加。对于JavaScript不熟悉的人来讲,这种方法的实现比想办法跟校花约会还麻烦。

然而,实际上,如果你要求不是很高,是个非常简便,且老少皆宜的

作者  | 2011-8-12 17:41:11 | 阅读(491) |评论(5) | 阅读全文>>

查看所有日志>>

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017

注册 登录  
 加关注