Ethan's Dream About me

IE6有个安全机制，有时候很烦人，当从https(secure)的环境中引用任何http(nosecure)的资源的时候，都要为用户弹出不安全提示框。

很多人可能只知引起这个报警的条件一：https页面中加载http的任何链接时；殊不知，还有其二：当元素具有src属性时，如果src属性值为空，或为about:blank或#时，也会弹出这个安全提示。

新上线的支付宝VIP会员频道发布过程中也遇到这个问题在，原来在iframe中使用了一个#，和几个同事焦躁的排查了近2个小时。

对于一个https环境的网站来说，遇到这种报警简直是家常便饭，排查起来就要特别小心了。由于第一种情况比较常见，所以我们的固定思维都聚集在了第一种上，出现问题排查的时候往往也只知道的去查找http链接。但当所有http链接都处理完后，如果仍然弹出这个提示，那多半是第二种情况产生的了。

另外，排查的好办法是Fiddler或Firebug、HttpWatch等网络请求查看工具，可能很明显的看出问题。
—————–## 2010-07-09 19:37 Updated ##———————
忘了给出解决办法：
在不想让src为确切值时，我们可以指定src为javascript:false;便解决了。 via http://www.zorked.com/security/ie-mixed-content-secure-nonsecure-items/

淘宝可爱的才女沉鱼姐分享了她使用Fiddler的经验，其中使用Fiddler替换本地文件很是受用，对于线上调试非常管用。

由于我平常工作的网站环境是https，使用Fiddler无法捕获到通讯，就无法使用线上文件替换的功能了，于是想想还有什么可替代的办法。猜想Chrome插件应该有注入代码的插件，于是上Google Extension的网站搜了一下Inject，找到了这个Advanced Page Injector，点击安装后打开”扩展程序”->”选项”进行配置，点击“Add a new rule”：

然后填写具体的规则：

然后，你就可以随意注入了，不过，不要注入有含有本地文件的地址，会报错的XD，建议搭建个本地web环境然后引用localhost的内容，然后你就可以随意随时的改东西了。

希望还能找到个可以像Fiddler一样可以映射本地或线上文件的Chrome插件……

/**************************************************************************>>>
哦，后来我知道了，原来可以在选项里面开启https支持，Tools->Fiddler Options->HTTPS->Capture HTTPS CONNECTS->Decrypt HTTPS traffic

昨天同事找到我，说咱们的“客户端下载”在IE6下通过短信下载的方式不能用。

打开IE Tester测试发现确实不能用，提示验证码错误。

先讲下我们的页面结构，为了实现前后端分离，我们现在的做法是将静态页面和逻辑处理分别放在不同服务器上面的，这样可以避开繁琐的发布流程方便前端修改。所以，像通过短信下载这类的逻辑就需要前端Post给后端，原本后端只支持https，但我们的页面是http，由http转到https的过程中部分浏览器会弹出安全警告框，因此将后端改成了https和http并存的方式。

改完后却出现了IE6无法下载的情况，查看http的header显示，当我请求POST数据到后端http时，后端返回一个302状态Location Redirect到了https，也就是最终还是POST到了https的页面，那为什么服务器会拿不到POST过去的正确数据呢？

当IE6 POST请求由http转到https后，笨笨的IE6认为这还是http连接，于是照样采用非加密方式向服务器POST数据。先是发送Header信息“POST / HTTP/1.1 Content-Type: application/x-www-form-urlencoded”标明这是一个POST请求且有数据主体，又因为SSL(https)只对请求主体内容加密，Header并不加密（通过Fiddler可以看到），服务器便能接收到请求，但是由于是通过加密通道获取到数据主体，服务器则将其看作加密数据进行解密，于是，杯具就这样造成了。而其他浏览器，处理则聪明多了。

最终还是无奈的改回到https咯，等待服务器改成新的http/https共存方案吧。

Transition是CSS3中新添加的特性，不知道翻译成什么叫法更好听一点，暂且叫做“转换”吧，即当元素在大小、颜色、布局、透明度等数值改变时（请注意是数值的改变），可以使其产生过渡的动画效果，比如当元素的大小变动时，可以使用Transition将这个变动过程变得分平滑，可以增强网站的体验。

基础知识

Transition对应的CSS属性列表：
transition-property
* 指定当元素哪个属性改变时执行Transition效果，属性可以时以下属性：none、all以及其他可以触发浏览器reflow或repaint的属性。
* 当指定为none时，动画立即停止，当指定为all的时候，则当元素产生任何属性值变化时都将执行“转换”效果，比如大小改变。
* 初始默认值为all.

transition-duration
* 指定“转换”过程的时间，如：1s、none。
* 初始默认值为0.

transition-timing-function
* 指定“转换”过程中可用的效果，预设的有：ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)，默认值时easy。
* cubic-bezier为通过贝塞尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。

* 初始默认值为default.

transition-delay
* 指定一个动画开始执行的时间，即当改变元素属性值后多长时间开始执行“转换效果”
* 初始默认值为0.

以上属性可看下面这个demo（如果无法看到效果，请更换你的浏览器）：

随机更改高度和宽度 设定transition为none

深度问题挖掘

属性值连写（短属性）
* transition和background等CSS属性一样支持属性值连写，比如：-webkit-transition: width 1s easy-in-out;
* 需要值得注意的是，原则上所有属性值是不区分位置的，但是“时间属性值”有点不同，浏览器会根据先后顺序决定，第一个可以解析为时间的属性值将体现为transition-duration，第二个可以解析为时间的属性值将体现为transition-delay

浏览器支持状况？
* Chrome 2+(-webkit-transition)，Firefox3.7+(-moz-transition)，Safari 3.1+(-webkit-transition)，Opera 10.5+(-o-transition)，其他浏览器暂不支持

Reflow和Repaint？
* Transition执行过程中，同样会产生大量的Reflow和Repaint，不过不同的是，这些变化都有一定是按照CSS中定义的运作方式规律的进行，所以浏览器可以预知整个过程的Reflow和Repaint过程，从而对其进行优化处理。(个人猜测，这需要查看webkit源码后再作结论)

正确理解Timing-function
* 这是几个Timing-function曲线图：

* 这是几个默认timing-function的示例：

* 一次“转变”便是一次曲线过程

激发Transition的条件
* 只要为元素指定任意一个以上的transition属性，元素在改变属性值的时候便可执行transition效果，并设其他属性值为初始值，详见上述属性列表。看这个demo：

<div style="-webkit-transition-duration:2s; width:300px; padding:10px;
border: 2px solid #ccc; background:#a01000;color:#fff;"
onmouseover="this.style.width='500px';"
onmouseout="this.style.width='300px';">鼠标移动到元素上方可观察变化效果</div>

* 值得注意的是，本文不止一次提到，是当“属性值”改变时才会激发transition效果，而不是所有“元素外观”的改变都会激发的，比如设定元素的宽度为百分比，然后改变浏览器大小，元素大小在改变的同时并未发现由transition的效果呈现。请看这两个demo。
————————————–邪恶的补充线——————————————

实践中还发现，当元素Layout不可见即display为none时，操作元素为block的同时操作其他可transition属性时，无法激发transition效果。解决办法为，先将元素设为block（或其他可见值），再setTimeout(function(){ /**属性改变代码**/ }, 0)，将transition操作提到js操作队列最后执行。//2010-06-01

收尾

嗯，transition就研究到这里吧，文章中有些只是个人臆测的结论，请不要盲目相信，随后我将继续扫一遍webkit中关于transition的源码再给出结论。

发现写一篇文章真累，废寝忘食，腰酸背疼，更加葱白大牛们写blog的毅力了，所以要懂得珍惜人家的劳动成果。

以前碰到弹出层被Select框突出的时候，都是靠再弹出层上价格iframe来盖住，因为再ie6中iframe和select以及object都属于特殊对象，无论你改变div的zIndex为多大都照样会出现这种情况。

前段时间做支付宝手机站项目的时候又遇到了这个问题，无奈，用传统iframe解决的时候发现项目中弹出层背后还有半透明层，如果使用iframe达不到需要的效果。

但在使用iframe的时候发现，select box更像是被隐藏掉了，使用iframe之前：

使用iframe之后：

于是萌生了针对ie6操作dom将所有select元素隐藏掉。于是写了以下函数（改进版）：

/**
  * s - Bool, 控制selectbox为显示(false)或隐藏(true)
  * e - DomElement, 控制selectbox dom查询深度，有利于提高效率
  **/
var hideSelectBox = function(s, e){
    if(!window.XMLHttpRequest){  //Detect IE6
        var d = e||document;
        var b = d.getElementsByTagName('select');
        for(var i=0,l=b.length; i<l; i++){
            b[i].style.visibility = s?'hidden':'visible';
        }
    }
};

查看DEMO