inline-block的使用场景

发表于 2012 年 5 月 16 日 by 司晨

大家都知道inline-block的意义，这里就简单介绍一下这个属性，其就是实现在行内呈现块级元素的表症，其实际意义是非常重要的，举例来说，在一段文字中，要给某个关键字前加上一个icon，如图：

这个icon我们要是用<img>标签来做的话，如果页面有N多个icon，无疑将增加页面加载，如果将所有的icon拼成一个图，放在页面上又不实际，这时就用到了inline-block，在设定高和宽后，用overflow隐藏掉溢出部分，就OK拉，这可能是inline-block的最大用途吧，如果再有最佳的[......]

继续阅读…

CSS美化 input type=”file”(续)

发表于 2012 年 5 月 14 日 by poker

这里的续，是续小强之前写的一篇博客《CSS美化 input type=”file”》。

前段时间开发一个功能，点击按钮选择文件后上传。之前的版本是用flash做的，用的swfupload组件。

后来决定用html5的拖拽功能开发一套无flash的上传。当然得用input[type=file]标签了。这里就有了小强提到的“form表单家族中的 upload field 在……各个浏览器下的表现层次不齐”问题。而且为了与flash版本一致，我们的选择按钮也只能是那个蓝色的button，不能显示默认的上传按钮。有幸看过小强的这篇文章，模仿做了一个，发现以下两个问题：

1、鼠标样式无法控制。小强文章里也有提及；

2、使用的标签太多，不够“清爽”（本人很讨厌过多的标签使[......]

继续阅读…

新浪微博分享功能你所不知道的吭爹策略

发表于 2012 年 5 月 14 日 by bower

分享到微博这个功能似乎已经成了网站的标配

http://v.t.sina.com.cn/share/share.php?title=&url=&pic=

它接受若干参数最主要的就是url, title

如果你传url给它它会抓取你的网页，分析出网页上的图片然后列出来供你选择如上图

今天接到一个bug ：就是某个网页，分享的时候没有图，新浪就是不抓图

你说新浪不抓，我有什么办法？。。

可是有的页面就会抓图。就表明新浪抓图它是有策略的

给我辛苦的测试现将总结分享如下

1，缓存：新浪有缓存策略，至少一天以上具体不详，一个url它在一定时间只抓一回，这就是为什么测试会很辛苦，我必须不停的变url。

2，图片策略，新浪只抓网页[......]

继续阅读…

随机问题之–洗牌算法

发表于 2012 年 4 月 26 日 by JK

洗牌算法是我们常见的随机问题，在玩游戏、随机排序时经常会碰到。
洗牌的思路通常有：抽牌法、换牌法、插牌法。

本文详细讲明三种思路的算法实现：http://www.cnblogs.com/jkisjk/archive/2012/04/23/javascript_shuffle.html

各浏览器默认样式对照表

发表于 2012 年 4 月 19 日 by 飘零雾雨

发个博客标记一下，好久没写了。

这段时间在重写 CSS Reset 的时候，突然觉得有必要稍微整理了一下各浏览器的默认样式对照表。我们知道所谓的CSS Reset其实就是为了统一各浏览器的初始外观形态，而决定这个初始外观形态的东西就是各浏览器的默认样式。

了解各浏览器的默认样式这能让我们对每条Reset规则的写法做到心中有数，也可以随时自己写一个适合相应项目或公司的CSS Reset出来。举个很简单的例子，你可能就不会再这样写了*{margin:0;padding:0;}

了解各浏览器的默认样式对于帮助我们了解浏览器差异有很大的帮助，比如做浏览器兼容、fix一些bug之类的，都在一定程度上要求我们对浏览器默认样式有一定的了解和记忆。

总之，了解浏览器默认样式可以在一定[......]

继续阅读…

使用 X-Frame-Options header 拒绝被嵌入框架(iframe…)

发表于 2012 年 4 月 11 日 by panliu888

最近测试google 嵌入iframe的一个东西，突然发现不能显示了。 IE如下图表现：

有点稀奇，之前从来没了解过。

通过javascript 判断 parent.location 和 locaiton 倒是可以做到，但显然这个不是google输出的，而是IE浏览器的显示。

在奇舞团同学们的帮助下，终于搞清楚了。

使用 X-Frame-Options header 拒绝被嵌入框架(iframe…)

UTF8_EXCE[......]

继续阅读…

autocomplete=”off” 引起“该网页已对该表单停用自动填充功能”提示

发表于 2012 年 4 月 1 日 by bower

有图有真相

在chrome下会有这个提示

产生原因：该表单之前是可以自动完成并且被使用过该功能，然后加入 autocomplete=”off” 在 form上双击就会出现这个提示而且上下键的功能也没有了

解决办法：

1, 从一开始就加 autocomplete=”off” 因为这个提示只会在 autocomplete属性发生更改时才会出现

2, 更改input name 属性让浏览器认为这是一个新的input 从而达到同1的效果

3，直接在input 上加 autocomplete=”off” 则不会出现这个提示。囧。。

IE6 IE7 IE8 在 position : relative 时fadeIn() fadeOut() bug 解决方案

发表于 2012 年 4 月 1 日 by bower

先看一个例子

<div class="fadein">
    <div>
        <div>I am going to fade in ;</div>
        <div>I am going to fade in ;</div>
    </div>
</div>
$('.fadein').hide().fadeIn();

以上代码基本上在所有主流浏览器都可以达到预期效果

但是现实是残酷的，大家的html结构当然不会这么简单。

我们再加一点东东