因为用了太多CSS，加上似乎jQuery也不支持低版本IE，于是想着能不能fuck IE呢？

结果真的发现了一段类似的代码（本身是用来检测浏览器的），稍作修改之后就可以开始Fuck了。

当然因为太蠢写出来呆萌呆萌的，实际上完全不用这么麻烦（顺便学了一下正则表达式的知识）

window.onload = function() {
    var browser=navigator.appName;
    var version=navigator.userAgent.match(/MSIE [0-9]/);
    if (version != null) 
        version = version[0].match(/[0-9]+/)[0];
    console.log(version);
    if ((browser=="Microsoft Internet Explorer") && (version <= 8)) {
        console.log('Fuck IE');
        document.write('Fuck IE');
    }
}

这里我们用到了navigator的相关属性，关于他的更多属性，可以参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator

这里其实很多都多此一举了=A=当初直接匹配[5-8]就没那么多事了呀，当然这里正则中用到了+，

?　出现零次或一次，最多一次
*　出现任意次（零次、一次、多次）
+　出现一次或多次，至少一次
{n}　能且只能出现n次
{n,m}　至少出现n次，最多出现m次

然后document.write()覆盖显示内容，当然这里要注意的是，document.write()必须得是最后载入的，于是我们还得使用window.onload保证加载完毕。

关于更多正则小知识：http://www.nowamagic.net/librarys/veda/detail/1019，从这里开始吧。

今天在Hostker群里有人问关于javascript除了比如element.style.height这种方法，有没有一次能修改css的函数，当时我就想着，不可能嘛，jQuery才有这么方便的功能吧$('element').css()

结果没想到javascript也有一个叫cssText的东西。

cssText是个可读可写的属性。

你可以通过 object.style.cssText读取他设置的css，可以通过 object.style.cssText=string来添加。

于是我们可以通过这个方法来追加CSS:

obj.style.cssText += " ;width:200px;position:absolute;left:100px;";　//这样便能解决在IE中出现的问题了

感觉真棒！

今天又有新的需求了，需要获取鼠标点击相对于浏览器窗口的位置，于是就要开始想办法咯。

查了教程，结果发现自己果然是文盲。

其实是很简单的，这里要说的事情有两点，第一点是关于怎么实现，第二点是关于event。

- 阅读剩余部分 -

CSS函数calc()可以用在任何一个需要<length>的地方.有了calc(),你可以通过计算来决定一个对象的大小和形状.

你还可以在一个calc()内部嵌套另一个calc().

可以在calc里运用的运算符就是加减乘除，我们可以拿他实现很棒的效果。

比如：

.banner {
  position:absolute;
  left: 40px;
  width: 90%;                       /* fallback for browsers without support for calc() */
  width: -webkit-calc(100% - 80px);  /* WebKit 536.3 (Chrome 19) and above, experimental */
  width:         calc(100% - 80px);  /* final CSS3 compliant implementation; Firefox 16 and IE 9, and above */
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
}

这里我们可以看到一个计算表达式，这是我们一直想做到的，但实际想做到这一点却要依靠javascript计算，所以我才说，这很棒。

剩下的演示不多做了，关于兼容性表以及详细的其他示例，可以看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc

演示

这是在慕课网看到教程之后觉得，哎哟这个屌，然后就做了……

只需要一个指定div就能实现这个效果，实际上在未来调用之类的上都是很方便的。其实感觉自己实现的还不是特别的好，比起原来的似乎总觉得缺了点什么，但基本也算完成了。

html不多说，就是一个加了.shadow的div，CSS部分才是重点！

- 阅读剩余部分 -

今天在click打开新窗口上也遇到了问题，切换url之后发现window.open还是原来的窗口，第一时间怀疑，卧槽难道window.open有缓存？

结果搜了一下一脸困惑貌似是真的，结果试了那个方法也没用。

后来各种console.log()排查，最终怀疑到事件绑定上去了，在绑定Click事件前，先将上一个解除绑定，具体方法如下：

比如： $("p").unbind();。如果你需要解除所有事件的绑定，这是一个非常好的方法。如果要解除click事件的绑定：$("p").unbind("click");就OK了。

实际上，我们平时用的比如$("p").click(function(){})也是bind的缩写$("p").bind("click", function(){})

今天因为工作的缘故对比了一下img和background-img的效果，结果发现还是background-img比较好用

比如我们拿一张长 > 宽的图来看：

HTML的结构始终是：

    <div class="main">
        <img src="Saber-Fate.jpg">
    </div>

    <div class="img"></div>

- 阅读剩余部分 -

CSS3能达到渐变的效果，而不用再大费周章的用JS来实现效果了，这点实际上是非常方便的……

比如说：

div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}

- 阅读剩余部分 -

目前在山寨百度首页，于是乎就用各种三角，实际上，在前一阵子（考试前）仿照自己博客样式的时候（xsky.me），也曾经折腾过三角形，所以这次来总结（备份）一下。

    height: 0;
    width: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color: #000 transparent transparent transparent;
    border-style: solid dashed dashed dashed;
    border-width: 5px;

在此，border-width决定了三角形的大小，具体发生了什么，可以参考：三种纯CSS实现三角形的方法，里面介绍了三种，而我只是用了其中的一种。

决定了三角形方向的是由border-color定义来的，transparent的一侧为透明。

如果想要规定a标签以外的，比如增加点击事件，可以大家怎么知道这货可不可以点，一般来说，一是做成按钮样式，而是改变鼠标放置Play时的样式咯，这样大家就知道，哦这货八成可以点。

用cursor就能改变鼠标样式了。

cursor:hand 与 cursor:pointer 的效果是一样，都像手形光标。但用FireFox浏览时才注意到使用cursor:hand在FireFox里并被支持。
cursor:hand ：IE完全支持。但是在firefox是不支持的，没有效果。
cursor:pointer ：是CSS2.0的标准。所以firefox是支持的，但是IE5.0既之前版本不支持。IE6开始支持。

- 阅读剩余部分 -